iconfont 图标的3种用法

iconfont网站图标有以下三种模式：

下面讲讲这三种模式分别在项目中如何使用

1、Unicode

点击复制代码，然后将代码复制到项目less中，然后定义一个iconfont的类，字体使用iconfont

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4403371 */
  src: url('//at.alicdn.com/t/c/font_4403371_91kp56ay2ac.woff2?t=1704701749401') format('woff2'),
       url('//at.alicdn.com/t/c/font_4403371_91kp56ay2ac.woff?t=1704701749401') format('woff'),
       url('//at.alicdn.com/t/c/font_4403371_91kp56ay2ac.ttf?t=1704701749401') format('truetype');
}

.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">&#xe69a;</i>

伪元素用法： less中

.icons {
  &::before {
    content: '\e69a';
  }
}

注意点：&#x 是一种表示十六进制 Unicode 字符的 HTML 实体编码，伪元素content 接受的也是 16 进制的 Unicode 编码，不过需要使用反斜杠\转义 组件中使用：

<span class="iconfont icons"></span>

2、Font Class

同样复制地址，在index.html的header中引入

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4403371_91kp56ay2ac.css">

html中：在图标那里复制后放到第二个类即可

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

3、Symbol

同样复制地址，在index.html的body中引入

<script src="//at.alicdn.com/t/c/font_4403371_91kp56ay2ac.js"></script>

html中使用：在图标那里复制后放到#后面

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

默认icon比较大，可以定义一个公共类：

.icon {
  width: 14px;
  height: 14px;
}