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

原创 明天的地平线  2020-01-01 10:30  已被 727 人围观

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

矢量图标的好处:

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

使用方法:

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

file

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、将需要使用图标的地方添加上如下标签和样式,这样图标就能正常显示了,对应大小颜色可以直接像操作字体一样操作就可以了

<i class="iconfont icon-shijian"></i>

其他项目(网站、APP)使用方法请参考官方指南:http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

本文地址:https://www.somta.net/article/133.html
关注我们:请关注一下我们的微信公众号:扫描二维码明天的地平线的公众号,公众号:明天的地平线
版权声明:本文为原创文章,版权归 明天的地平线 所有,欢迎分享本文,转载请保留出处!

发表评论