阿里图标的三种使用方式

1.Unicode

特点

• 兼容性最好，支持ie6+
• 支持按字体的方式去动态调整图标大小，颜色等等
• 不支持多色图标
• 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

使用步骤：

1.直接引用线上地址或下载至本地

image

2.复制以下代码到index.html中，或新建一个iconfont.css文件引入

3.在组件中使用



2.Font class

特点：

• 兼容性良好，支持ie8+
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
• 不支持多色图标

使用步骤：

1.直接引用线上地址或下载至本地

image

2. 在index.html中引入

3.在组件中使用

3.Symbol

特点：

• 支持多色图标，不再受单色限制
• 支持像字体那样通过font-size,color来调整样式
• 支持 ie9+
• 可利用CSS实现动画
• 减少HTTP请求
• 矢量，缩放不失真
• 可以很精细的控制SVG图标的每一部分

使用步骤：

1.直接引用线上地址或下载至本地

image

2.在index.html文件中引入

• 设置通用css

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

3.在vue组件中引用,href里面的#caisenan即图标类名