下面我们一一个小程序>微信小程序的登录界面的制作为例来说明,如何从iconfont中获取字体图标是如何应用到小程序>微信小程序中去的。首先我们看效果。
这里所有的图标,都是从iconfont中以字体的形式来加载的,也就是说,我们自始至终没有使用一张图片。
如果这就是你要追求的效果,那么我们下面开始一步一步带你如何实现。
文章原出处: https://haigear.blog.csdn.net/article/details/143225095
一、获取资源
打开网站:https://www.iconfont.cn/,如果你没有注册账号,最好是使用微信注册一个账号,这样后面你正在编写的小程序>微信小程序项目就会自动识别在这个网站平台上。
1、选择图标
首先,在iconfont中选择好你需要的图标,添加进入你的购物车,然后加入你的项目
2、下载
下载字体包文件,我们主要是获取其中的iconfont.css文件,在小程序>微信小程序中我们要用到它来显示字体图标。
3、解压
解压之前在微信项目中新建一个font的文件夹,将这些文件解压到font文件夹中。如下图:
千万记住,解压出来的css文件,将扩展名修改为wxss,这样小程序>微信小程序才能够正确识别。如果不想把这些字体也打包到小程序>微信小程序中,那么只要解压iconfont.css一个文件即可。
文章原出处:https://haigear.blog.csdn.net/article/details/143225095
二、如何应用到小程序>微信小程序中去?
上面,我们已经将最重要的文件放进了小程序>微信小程序项目的font文件夹中去了。
1、修改iconfont.wxss
如果你不想打包字体到小程序>微信小程序中,则我们就需要修改代码,将iconfont中的@font-face {……}部分,替换为你在下图复制的代码
但是,如果你担心提供字体的平台服务部稳定,那么你还是老老实实将下载的字体也一并解压到你的小程序>微信小程序的font目录下。
需要注意的是,这些本地字体如果我们在先下载前没有设置为base64小程序>微信小程序目前还不能直接识别他们,需要进行转码,将转码好的文件再次放入font下才可以使用。
设置如下图:(在项目设置里面)
如果你都已经下载完成了,也可以找一个转码转码的网站来进行转化,这里提供一个转码的网站:https://transfonter.org/
按照我上面标识的步骤来操作,3步就可以得到你要的字体。下载下来的压缩包中,对于我们来说有用的酒是这个stylesheet.css.
我们同样是将你小程序>微信小程序项目中的iconfont.wxss中的@font-face {……}部分,替换为stylesheet.css文件中的@font-face {……}部分,这样本字体图标地解析就能够正确完成。
2、在wxml文件中使用
这个比较简单,随便整一个标签试试:
<view class="iconfont icon-weixin"/><view class="iconfont icon-qq"/><view class="iconfont icon-weibo"/>
运行的效果如下:
好了,就说到这里,有什么疑问留言讨论。文章随时可能更新,请关注文章原出处:https://haigear.blog.csdn.net/article/details/143225095