阿里iconfont的使用

字体图标色使用

——使用阿里的iconfont做例子

1. 注册账号，进入官网后选中想要的字体，一并加入购物车

2. 点击购物车之后下载图标代码

3. 

4. 下载之后就会得到一个压缩包，把压缩包解压后可以看到里面有很多个文件。把这一整个的文件丢到你的html同一个文件夹中。

5. 

6. 在demo_index.html中点击进去会发现详细的解释说明。

7. 

8. 进入网页后把玫红色框里的内容复制到你的样式中

   1. 如果是页级css（就是css和html在一个html中），就把复制的这一段放在style里面。

   2. 如果是外联样式，就把复制的这一段反在.css中.

9. 

10. 使用：如demo所示，在demo页面中有这么一串代码，这就表示你的字体图标，把它复制下来，在需要的时候可以当成一个字体放进去。

11. 

12. 最后，如果字体图标出现一个框框的话，原因：

    1. 之前导入的字体，与现在使用的字体出现冲突，建议在字体图标中加入！Impotant

    2. 之前把.ttf文件夹复制到html的文件夹中，所有url的位置不对，需要改@font-face里的url的位置。

13. 完整展示