阿⾥图标库iconfont的使⽤（font-cclass⽅式、symbol⽅式、动态创建⽅法）iconfont的使⽤
font-class引⽤
特点
1. 兼容性良好，⽀持ie8+，及所有现代浏览器。
2. 使⽤class来定义图标，替换图标时，只需要修改class⾥⾯的unicode引⽤。
3. 本质上是使⽤字体，所以多⾊图标不⽀持。
使⽤⽅法
1. ⽹络引⽤
1. 第⼀步：拷贝项⽬下⾯⽣成的fontclass代码：
//at.alicdn/t/font_8d5l8fzk5b87iudi.css
2. 第⼆步：挑选相应图标并获取类名，应⽤于页⾯：
<i class="iconfont icon-xxx"></i>
2. 本地引⽤
1. 第⼀步：将项⽬下载到本地，通过以下⽅式进⾏引⼊：
<style>
@import '../../assets/font/iconfont.css';
</style>
2. 第⼆步：挑选相应图标并获取类名，应⽤于页⾯：
<i class="iconfont icon-xxx"></i>
symbol引⽤
特点
1. ⽀持多⾊图标。
2. ⽀持像字体那样，通过font-size,color来调整样式。
3. 兼容性较差，⽀持 ie9+，及现代浏览器。
4. 浏览器渲染svg的性能⼀般，还不如png。
使⽤⽅法
1. ⽹络引⽤（配合 ant-design 组件库）
1. 第⼀步：拷贝项⽬下⾯⽣成的symbol代码：
//at.alicdn/t/font_8d5l8fzk5b87iudi.js
然后打开 main.js 添加以下内容：
const IconFont = ateFromIconfontCN({
scriptUrl:'//at.alicdn/t/font_2012018_uepygac1qqq.js',
});
});
Vueponent("IconFont", IconFont);
2. 第⼆步：加⼊通⽤css代码（引⼊⼀次就⾏）：
<style type="text/css">
.icon{
width: 1em;height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
3. 第三步：挑选相应图标并获取类名，应⽤于页⾯：
<IconFont class="icon-btn"type="icon-express"/>
2. 本地引⽤
0. 提前安装依赖 css-loader
icon图标库1. 从 iconfont 上将项⽬下载到本地，讲⼀下五个⽂件放⼊同⼀⽂件夹后放⼊ assets ⽂件夹。
iconfont.css
<
iconfont.js
iconfont.svg
iconfont.woff
2. 引⼊ css 和 js ⽂件
引⼊ css
<style>
@import '../../assets/images/font/iconfont.css'
</style>
引⼊ js
<script>
import'../../assets/images/font/iconfont.js'
</script>
3. 加⼊通⽤ css 代码
.icon{
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin:0 auto;/*px*/
width: 63px;
height: 63px;
}
4. 使⽤如下代码添加 iconfont 元素
<svg class="icon"aria-hidden="true">
<use :xlink:href="#icon-shouyekuang-"></use>
</svg>
动态创建⽅法（本地引⽤）
前三步和使⽤⽅法（本地引⽤）相同。
4. 动态添加 iconfont 元素
<script>
let svgns ="/2000/svg";
let xlinkns ="/1999/xlink";
let icon = ateElementNS(svgns,"svg");
icon.setAttribute("aria-hidden",true);
let use = ateElementNS(svgns,"use");
use.setAttributeNS(xlinkns,"href","#icon-emo");
icon.appendChild(use);
document.body.appendChild(icon)
</script>
注意：icon-emo （图标代码）前⾯需要带 #

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。