刚刚接触iconfont，发现它真是个好东西。

使用字体图标的好处：改颜色，改大小都可以随时所欲，写个多态按钮分分钟搞定，爽的不要太过分！

阿里的字体图库 https://www.iconfont.cn，功能很爽；之前接入fontawesome, 都是找到库整体引入，会导致最后的资源保变大。
现在可以新建一个项目，把需要的图标都弄进去，然后在线引用或者直接打包下载使用。

费话不多说，直入主题

mpvue引用iconfont

1. 注册账号，简历项目，上传图标
2. 根据图中的设置，找到箭头1 对应的url，如果这里没看到，就点击箭头2 指向的按钮，可以展示出来

3 下载此文件到本地，放置到mpvue项目的static目录下，保存为iconfont.css (可以自己改名字)

4. App.vue中import即可使用

import '../static/css/iconfont.css'

5. 页面中需要使用图标

踩坑日记：

部分图标展示出来，不是原来设计的样子（在h5中展示是正常的）：

比如，设置图标：

<view class="summary-item iconfont iconshezhi"/>， （设计图）（实现图）

css中查看对应的样式如iconshezhi的具体实现如下：

.iconshezhi:before {content: "\e6e4";
}
所以其对应图标的unicode值是0xe6e4

将字体文件下载到本地，使用font forge查看具体字体内容。参考资料传送门

可以看到对应的图标也是正确的，但是在界面上看到了这几个字

心理就怀疑会不会是小程序对于解析字体是用的分区方式不一样，于是开始排列展示最接近的图标

<view class="summary-item iconfont icontixing-moren"/>
<view class="summary-item iconfont iconshezhitixing"/>
<view class="iconfont iconchenggong"/>
<view class="summary-item iconfont iconduihao"/>
<view class="summary-item iconfont iconwenhao"/>
<view class="summary-item iconfont iconxiaoxi"/>
<view class="summary-item iconfont iconguanzhu-shixin"/>
<view class="summary-item iconfont iconguanzhu"/>
<view class="summary-item iconfont iconshezhi"/>

观察结果，发现对号之后的图标都无法展示，而字库中的图标排列如下：

根据实测结果可知，对号之后的图标都无法展示，进一步验证了我的猜想。

在做一个测试：将后面的某个图标，修改unicode值后，再次使用，发现能正常展示了。

最后的实验结果：微信小程序使用iconfont时， icon的unicode不能超过 0xe6dc（对号那个图标的unicode值）。

附修改unicode的方法：

1. iconfont.cn 网页上直接选择编辑图标，即可看到修改unicode地方

保存后，根据提示生成新的css文件链接，下载并覆盖之前的Iconfont.css文件即可。

踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确相关推荐

微信小程序开发时遇到403错误解决
前端程序向后台服务器发送请求时,如果服务器不允许跨域请求,则会导致403错误发生(错误信息为:"Invalid CORS request").我们通常的解决办法是将信任的域配置到C ...
微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气
效果预览页面功能介绍此天气预报功能首先获取用户当前位置城市名,对于获取当前位置城市名和百度天气ak申请有疑问可以参考之前文章,然后根据城市名调用百度天气接口返回天气各项数据,最后对返回的数据进行处 ...
微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
微信小程序开发的那些坑，你踩过吗？
微信小程序开发的那些坑,你踩过吗? textarea组件value不显示 textarea组件默认值绑定data数据真机不显示问题 |?链接使用.switchTab跳转到tabbar页传递参数问题 ...
使用Vue开发微信小程序：mpvue框架
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
微信小程序开发跳坑指南（51-100）
接着上次的跳坑指南(1-50): http://blog.csdn.net/qq_38530880/article/details/72844271 跳坑<一百>ssl证书相关问题(SSL ...
两百条微信小程序开发跳坑指南（不定时更新）
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟出品跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一 ...
基于mpvue框架搭建微信小程序开发环境
一.按照mpvue官网新建前台工程 http://mpvue.com/mpvue/quickstart.html(mpvue快速上手教程) 二.路由功能代码实现 mpvue对vue-router的支持 ...

踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确

刚刚接触iconfont，发现它真是个好东西。

mpvue引用iconfont

踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确相关推荐

最新文章

热门文章

踩坑 微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确

刚刚接触iconfont， 发现它真是个好东西。

mpvue引用iconfont

踩坑 微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确相关推荐

最新文章

热门文章

踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确

刚刚接触iconfont，发现它真是个好东西。

踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确相关推荐