欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

字体图标的使用

程序员文章站 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">&#xe600</label>购物车<span>(0)</span></a>

设置类 iconfont以及 书写字体图标 &#xe600
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中对于字体图标的使用,方法如上。