阿里巴巴矢量库iconfont使用方法大全

大家好，欢迎来到IT知识分享网。

1.下载矢量图

2 三种引入方式

2.1 Unicode

第一步：拷贝项目下面生成的font-face到html文件的style标签下

@font-face { 
   font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } 

第二步：定义使用iconfont的样式 复制到html文件的style标签下

.iconfont{ 
    font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } 

第三步：挑选相应图标并获取字体编码，应用于html页面

<i class="iconfont">&#x33;</i> 

2.2 Font class

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css"> 

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span> 

也就是将icon-xxx替换为icon-unfold等等
这大概是最简单的方法，而且引入之后，像第一种方式使用也是生效的。

<i class="iconfont">&#x33;</i> 

2.3 Symbol

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script> 

第二步：加入通用 CSS 代码（引入一次就行）：

<style> .icon { 
    width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 

第三步：挑选相应图标并获取类名，应用于页面：

 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> 

3 伪元素使用阿里矢量图

font-family: "iconfont" !important; content: '\e661'; 

即可。

4 其他

4.1 修改样式

5 参考