字体图标的使用
程序员文章站
2024-02-16 15:14:58
...
1,字体图标
字体图标(矢量图):同文字一样可以设置大小,字体等。不像img图片一样,放大或者缩小导致图片失真,模糊。
2,下载字体图标
以阿里图标库为例:官网http://iconfont.cn/,打开官网登录/注册自己的账号,根据自己的需求选择合适的图标,然后选择加入购物车,最后将图标加入项目,如果第一次打开,或者从未建立过项目的,可以先建一个新的项目。
进入本地我的项目,下载至本地,解压如图:
1)加入购物车
2)下载文件
3)解压后的文件
4)引入字体库图标样式
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
5)web中使用
<a href=""> <label class="iconfont"></label>购物车<span>(0)</span></a>
设置类 iconfont以及 书写字体图标 
3,微信小程序中使用字体图标
1)将2中的3)做完后 进入 http://transfonter.org/平台 将解压出来的 iconfont.ttf字体文件转为base64格式 如下图
2)解压后的文件如图
3)将转换前解压的文件中 iconfont.css 中的内容复制到,新建的font.wxss文件中,@font-face这部分不要,其他的留下。将转换后并解压 的文件stylesheet.css中的内容全部复制到font.wxss文件中。
如图:
4)在微信小程序中使用
iconfont 必写 icon-down 为需要使用的字体图标
<text class="iconfont icon-down"></text>
4,总结
微信小程序与web中对于字体图标的使用,方法如上。