<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>下面我们一一个微信小程序的登录界面的制作为例来说明，如何从iconfont中获取字体图标是如何应用到微信小程序中去的。首先我们看效果。<br /> <img src="https://i-blog.csdnimg.cn/direct/accac68c3bd7417ab5314f0156ba883e.png" alt="在这里插入图片描述" /><br /> 这里所有的图标，都是从iconfont中以字体的形式来加载的，也就是说，我们自始至终没有使用一张图片。<br /> 如果这就是你要追求的效果，那么我们下面开始一步一步带你如何实现。</p> 讯享网
打开网站：https://www.iconfont.cn/，如果你没有注册账号，最好是使用微信注册一个账号，这样后面你正在编写的微信小程序项目就会自动识别在这个网站平台上。
讯享网
首先，在iconfont中选择好你需要的图标，添加进入你的购物车，然后加入你的项目
下载字体包文件，我们主要是获取其中的iconfont.css文件，在微信小程序中我们要用到它来显示字体图标。
解压之前在微信项目中新建一个font的文件夹，将这些文件解压到font文件夹中。如下图：
千万记住，解压出来的css文件，将扩展名修改为wxss，这样微信小程序才能够正确识别。如果不想把这些字体也打包到微信小程序中，那么只要解压iconfont.css一个文件即可。
文章原出处：https://haigear.blog.csdn.net/article/details/
上面，我们已经将最重要的文件放进了微信小程序项目的font文件夹中去了。
如果你不想打包字体到微信小程序中，则我们就需要修改代码，将iconfont中的@font-face {……}部分，替换为你在下图复制的代码
但是，如果你担心提供字体的平台服务部稳定，那么你还是老老实实将下载的字体也一并解压到你的微信小程序的font目录下。
需要注意的是，这些本地字体如果我们在先下载前没有设置为base64微信小程序目前还不能直接识别他们，需要进行转码，将转码好的文件再次放入font下才可以使用。
设置如下图：（在项目设置里面）
如果你都已经下载完成了，也可以找一个转码转码的网站来进行转化，这里提供一个转码的网站：https://transfonter.org/
按照我上面标识的步骤来操作，3步就可以得到你要的字体。下载下来的压缩包中，对于我们来说有用的酒是这个stylesheet.css.
我们同样是将你微信小程序项目中的iconfont.wxss中的@font-face {……}部分，替换为stylesheet.css文件中的@font-face {……}部分,这样本字体图标地解析就能够正确完成。
这个比较简单，随便整一个标签试试：
讯享网
运行的效果如下：
好了，就说到这里，有什么疑问留言讨论。文章随时可能更新，请关注文章原出处：https://haigear.blog.csdn.net/article/details/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/204995.html