阿里图标的三种使用方式

1.Unicode

特点

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

使用步骤：

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

image

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

<style type="text/css">
  @font-face {
    font-family: 'iconfont';
    /* project id 1000117 */
    src: url('//at.alicdn.com/t/font_1000117_n3ngonecs7.eot');
    src: url('//at.alicdn.com/t/font_1000117_n3ngonecs7.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1000117_n3ngonecs7.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1000117_n3ngonecs7.woff') format('woff'),
      url('//at.alicdn.com/t/font_1000117_n3ngonecs7.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1000117_n3ngonecs7.svg#iconfont') format('svg');
  }

  .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;
  }
</style>

3.在组件中使用

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

2.Font class

特点：

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

使用步骤：

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

image

2. 在index.html中引入

<link href="//at.alicdn.com/t/font_1000117_n3ngonecs7.css" rel="stylesheet" type="text/css"/><!--线上（推荐开发测试用）-->
<link href="./static/iconfont.css" rel="stylesheet" type="text/css"/><!--本地（推荐项目上线用）-->

3.在组件中使用

<i class="iconfont caiseshijian"/>

3.Symbol

特点：

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

使用步骤：

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

image

2.在index.html文件中引入

<script src="//at.alicdn.com/t/font_1000117_n3ngonecs7.js"></script><!--引入线上的地址（推荐开发用）-->
<script src="./static/iconfont.js"></script><!--引入下载后的iconfont.js文件（推荐线上用）-->

• 设置通用css

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

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

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