阿里字体小图标的使用

比眉伴天荒 2021-09-18 14:54 500阅读 0赞

在项目开发中，我们难免会用到一些图片之类的样式，但是图片本身体积大，而且更改样式和其他标签融合布局相对麻烦，那么有没有更好的办法呢？

字体小图标解决了我们这个问题。

我们这次就说说常见的阿里字体小图标的使用

官网地址：[阿里字体小图标官网][Link 1]

**使用步骤：**

*  进入阿里字体小图标官网，注册登录（推荐使用微博登录，懒得注册）
 *  搜索自己想要的图标加入购物车
 *  在右上角的购物车图标那一栏可以看见自己添加的小图标
 *  当选择完毕后，将购物车的图标添加至项目（如果没有，可以新建一个）
 *  在项目那一栏可以看见三种方式：unicode和font class是字体小图标，可以设置字体的属性，font class相对方便，只需修改class名就可以赋予不同的样式，但是它俩都不支持多色，只支持单色，而symbol是svg的一种，当前比较流行，支持多色。这里推荐初学者使用font class这一项，然后可以选择下载至本地，或者在线链接，这里介绍下载至本地

![20190326094547416.png][]

*  下载后的是个download的压缩包，解压此文件![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70][]

*  打开文件夹将除了css、html、 js 以外的文件复制到自己项目中的font（fonts）文件夹中![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1][]

*  将文件夹中的iconfont.css文件复制到自己项目的css文件夹中，并打开修改路径

原：

@font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1553565034687'); /* IE9 */
      src: url('iconfont.eot?t=1553565034687#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
      url('iconfont.woff?t=1553565034687') format('woff'),
      url('iconfont.ttf?t=1553565034687') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('iconfont.svg?t=1553565034687#iconfont') format('svg'); /* iOS 4.1- */
    }

改：

@font-face {font-family: "iconfont";
      src: url('../font/iconfont.eot?t=1553565034687'); /* IE9 */
      src: url('../font/iconfont.eot?t=1553565034687#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
      url('../font/iconfont.woff?t=1553565034687') format('woff'),
      url('../font/iconfont.ttf?t=1553565034687') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('../font/iconfont.svg?t=1553565034687#iconfont') format('svg'); /* iOS 4.1- */
    }

*  打开其中html文件，按照其中的步骤引入css文件，在使用字体小图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2][]

这里选择font class，然后下面的代码就是对应的class名

引入步骤：

*  引入css文件

*  使用字体小图标

这里的xxx就是上图的小图标后面的名字

然后只要根据class名更改font属性就可以修改小图标了，比如font-size调整小图标的大小

好了，以上就是阿里小图标的简单使用。

如有问题，请指出，接受批评。

个人微信公众号：

![20200824120503955.png][]

[Link 1]: https://www.iconfont.cn/
[20190326094547416.png]: /images/20210812/f2c749ddb45b459eb883798c3aebe766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210812/116a8f8ec94e4d558a85c4a43c903746.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]: /images/20210812/c6ccc624687544028c99004d2d65af19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2]: /images/20210812/ddd0373980e24cf78d424d6ac5213583.png
[20200824120503955.png]: /images/20210812/015f14c358634bb58e55043ac5f2fa19.png