CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果

来源:互联网转载和整理 2024-11-15 01:59:50

阿里巴巴矢量

进入阿里巴巴矢量图标库

阿里巴巴矢量图标库

1.Unicode
2.Font class

此次便是对于这两个的使用

Unicode

开始进入时,会自动生成代码,如果没有,则点击生成
例:

@font-face {  font-family: 'iconfont';  /* project id 1743720 */  src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');  src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),  url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');}

其中最最关键的是iconfont

同时,我们还需要修改其对应的url路径

以第一个举例

<!--原来的url-->src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');<!--修改后的的url,打开浏览器之后访问一下对应的url,提示下载eot文件则修改成功-->src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

Unicode中对于图标的引用如下

在刚刚的个人页面中,选中Unicode可以看见加入的图标都在下面,以搜索举例

鼠标滑上去以后可以看见复制代码的图标,点击复制

以下为实例代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图标使用</title> <style>  @font-face {font-family: 'iconfont';  /* project id 1743720 */src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');  }  .wrapper {width: 1090px;height: 300px;background-color: antiquewhite;margin: 0px auto;text-align: center;  }  .iconTest::before {  /*此处为复制来的图标代码,修改为以下形式*//* content: "&#xe61a;"; */content: "\e61a";font-family: "iconfont";  } </style></head><body> <p class="container">  <p class="wrapper"><span class="iconTest"> : Hello CSS</span>  </p> </p></body></html>

效果图

###Font Class中对于图标的引用

这个就要简便很多了

在图标库个人主页的Unicode旁边就是Fonte Class点击,再任选一个图标,复制代码。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图标使用</title> <!--以引入css资源的方式使用,url同样修改一下,加入https://--> <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css"> <style>  .wrapper {width: 1090px;height: 300px;background-color: antiquewhite;margin: 0px auto;text-align: center;  } </style></head><body> <p class="container">  <p class="wrapper">  <!--iconfont表示这个是一个图标样式-->  <!--icon-sousuot表示这个是图标中的搜索--><span class="iconfont icon-sousuo"></span><span> : Hello CSS</span>  </p> </p></body></html>

更加简便的使用

有时候,一个复杂的网页包含各种图标的引用,例如导航栏每个栏目的前面都要一个图标,这个便用到了了::before,而同样后面有时候又要用span来引用图标,这时,我们便可以引入Font-Class中的使用方法却达到了两种场景的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图标使用</title> <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css"> <style>  .wrapper {width: 1090px;height: 300px;background-color: antiquewhite;margin: 0px auto;text-align: center;  }  .iconTest::after {content: "\e61a";font-family: "iconfont";  } </style></head><body> <p class="container">  <p class="wrapper"><span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hello CSS</span>  </p> </p></body></html>

效果便是Hello CSS前后都有搜索图标

原因:打开引入的css我们可以发现其中也包含了Unicode,因此之后的使用只需要引入Font-Class即可,而图标对应的十六进制编码在Unicode中复制,也算是一个小技巧。

总结