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

进入阿里巴巴矢量图标库

阿里巴巴矢量图标库

选择喜欢的图标的，点击添加到库
选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）
然后在右侧中点击添加至项目
之后在个人主页中可以看见

1.Unicode
2.Font class

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

Unicode

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

@font-face {
  font-family: 'iconfont';  
  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路径

以第一个举例


src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

Unicode中对于图标的引用如下

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

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

以下为实例代码




    
    
    图标使用
    
 @font-face {
     font-family: 'iconfont';  
     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: "e61a";
     font-family: "iconfont";
 }
    


    
 
      : Hello CSS

效果图

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

这个就要简便很多了

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




    
    
    图标使用
    
    
    
 .wrapper {
     width: 1090px;
     height: 300px;
     background-color: antiquewhite;
     margin: 0px auto;
     text-align: center;
 }
    


    
 
 	
 	
      : Hello CSS

更加简便的使用

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




    
    
    图标使用
    
    
 .wrapper {
     width: 1090px;
     height: 300px;
     background-color: antiquewhite;
     margin: 0px auto;
     text-align: center;
 }

 .iconTest::after {
     content: "e61a";
     font-family: "iconfont";
 }
    


    
 
      : Hello CSS

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

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

总结

到此这篇关于CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)的文章就介绍到这了,更多相关css 阿里巴巴矢量图标库内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！

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

CSS教程相关栏目本月热门文章