微信小程序之使用阿里巴巴矢量图标库(Iconfont)

Love The Way You Lie 2024-04-18 05:04 40阅读 0赞

阿里巴巴矢量图标库(Iconfont)可以说是我们后台程序猿们的福音，对应我们这些不会做图，有对项目审美有洁癖的人来说，没有一个漂亮的界面，我们真的看不下去，我个人也是非常喜欢使用Iconfont，它可以将我们需要的图标整合成一个项目，然后引入到我们的网站，APP，小程序等，Iconfont支持非常好，不管我们做什么样的项目，我们都能用到它。

**矢量图标的好处：**

有些人可能还不了解矢量图标，以为和普通的图标没有什么区别，所以导致有些小伙伴从Iconfont直接把图标下载成图片，然后放到自己的项目中，但是当图标过度放大或缩小时，就出现了图标模糊的情况，其实矢量图标的好处就是不管你怎么放大或者缩小，它都不会失真的

**使用方法：**

**1、在Iconfont中新增一个项目，并将我们需要的图标都放到这个项目中，这样方便管理**

![image][]

**2、选择Unicode，查看该选项下的在线连接如下**

@font-face {
      font-family: 'iconfont';  /* project id 810939 */
      src: url('//at.alicdn.com/t/font_810939_27sak7ae80ji.eot');
      src: url('//at.alicdn.com/t/font_810939_27sak7ae80ji.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_810939_27sak7ae80ji.woff') format('woff'),
      url('//at.alicdn.com/t/font_810939_27sak7ae80ji.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_810939_27sak7ae80ji.svg#iconfont') format('svg');
    }

**3、将以上代码添加到app.wxss文件中，也就是全局的样式文件中，其他类型的项目(网站、APP)也是类似，放到对应的公共样式里面就可以了**

@font-face {
      font-family: 'iconfont';  /* project id 661797 */
      src: url('//at.alicdn.com/t/font_661797_xv8i7wot3w.eot');
      src: url('//at.alicdn.com/t/font_661797_xv8i7wot3w.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_661797_xv8i7wot3w.woff') format('woff'),
      url('//at.alicdn.com/t/font_661797_xv8i7wot3w.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_661797_xv8i7wot3w.svg#iconfont') format('svg');
    }
    
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

**4、将每个图标的属性，比如内容、大小、颜色设置好**

/**单个图标**/
    .icon-iconset0329:before { content: "\e6e4"; }
    
    .icon-yanjing:before { content: "\e60d"; }

**5、将需要使用图标的地方添加上如下标签和样式，这样图标就能正常显示了，对应大小颜色可以直接像操作字体一样操作就可以了**

其他项目（网站、APP）使用方法请参考官方指南：[http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code][http_www.iconfont.cn_help_detail_spm_a313x.7781069.1998910419.d8cf4382a_helptype_code]

[image]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyNzc3OS05NDQ3MTgyZjMxZmUyZjRiLnBuZw?x-oss-process=image/format,png
[http_www.iconfont.cn_help_detail_spm_a313x.7781069.1998910419.d8cf4382a_helptype_code]: http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code