添加自定义字体icon图标

先提供一个比较好的自定义icon图标库阿里图标库

所以接下来的使用主要就是以从上面提供的网址下载的icon图标为例（如果不会使用，请参考使用

下载完之后是一个压缩包，解压后，只需要根据我们的需要把相应的文件放入我们的项目中即可

需要注意的是：我们一般会将我们下载的字体图标放在我们自己建fonts文件夹中，把iconfont.css放在css文件夹中，如果你这样做了，一定要记得修改iconfont中的路径，比如，你的文件是像下面这样的

打开你的iconfont.css，里面的结构是：

@font-face {font-family: "iconfont";
  src: url('../iconfont.eot?t=1529571163938'); /* IE9*/
  src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAA') format('woff'),//因为base64编码太长，所以我删减了一点，主要是看过程哈
  url('../iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-dianying:before { content: "\e67d"; }

.icon-kongbudianyinghulijing:before { content: "\e602"; }

.icon-kongbudianyingxixiegui:before { content: "\e606"; }

.icon-dianying1:before { content: "\e627";

那其实我们要修改的也只是

@font-face {font-family: "iconfont";
  src: url('../iconfont.eot?t=1529571163938'); /* IE9*/
  src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAAAAFzAAAQA') format('woff'),//因为base64编码太长，所以我删减了一点，主要是看过程哈
  url('../iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */
}

修改后为

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1529571163938'); /* IE9*/
  src: url('../fonts/iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAAA') format('woff'),//因为base64编码太长，所以我删减了一点，主要是看过程
  url('../fonts/iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */
}

修改完之后，就是怎么使用了，它上面提供了三种使用方式：

第一种：unicode引用
unicode是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。

但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

如果我们使用这种方式，我们只需要在我们的项目中导入下面的这几个文件就可以了，其他的都可以不要

iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff

iconfont.css

并且其实我们是可以将iconfont.css中的下面部分删除掉

.icon-dianying:before { content: "\e67d"; }

.icon-kongbudianyinghulijing:before { content: "\e602"; }

.icon-kongbudianyingxixiegui:before { content: "\e606"; }

.icon-dianying1:before { content: "\e627";

准备好之后就是使用了，首先需要引入iconfont.css文件

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

然后主要就是html代码了，看下面的简单示例

 <i class="icon iconfont"></i>
 <div class="name">电影院</div>

css代码其实就是看你自己怎么写了，主要就是改变字体颜色了，大小了，行高等等，我就不再写了

第二种：font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用方法和第一种很类似，只是iconfont.css中的内容就不要删除了

使用方法：首先需要引入iconfont.css文件

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

使用示例如下：

<i class="icon iconfont icon-kongbudianyingxixiegui"></i>
<div class="name">恐怖电影</div>

和第一种的不同就是，用class类代替使用unicode了，这个类名一般都是语义化的，而且编译器自己一般也会提醒，所以不用担心

第三种：symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

这个的使用方法就和上面的有所不同了，使用方法如下：

第一步：引入项目下面生成的symbol代码：注意使用这种方法，引入的不是iconfont.css,而是iconfont.js

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

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

<style type="text/css">
.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>

应用示例：

            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianying1"></use>
            </svg>
            <div class="name">电影</div>

其实，从阿里的图标库中下载的文件中，也有具体的使用，那几个HTML就是说明，我是把内容提炼精简一下，总结在一起

添加自定义字体icon图标

猜你喜欢