uni-app使用iconfont保姆级教程
1.背景
uniapp中自带的icon很少,不管哪个UI框架都有这个问题,最好就是引用来自iconfont之类的自定义项目文件,我见过很多项目是将文件直接下载下来使用,弊端是操作麻烦,颜色不可修改,只能用已下载的颜色,最好的方式当然是使用字体文件来实现,这里就详细说下操作流程
2.方案步骤
步骤主要分两块,一块是iconfont上的项目管理,一块是本地uniapp项目中的配置
2.1.iconfont端
iconfont端主要分几步:
1.创建项目
2.选择图标
3导出字体文件
2.2.项目端引用
项目端引用主要分3步
1.文件下载
2.CSS引用
3.CSS引用路径修改
3.步骤详情
3.1iconfont项目端
1.创建项目
在顶部【资源管理】中选择【我的项目】
进入我的项目后点击添加按钮,下图中的【1】,然后按自己要求填写【2】中内容,我这里就用了默认【no name】作为演示2.选择图标
项目创建好后就可以去搜索自己要的图标了,找到自己要的图标后点击购物车,放入购物车中
然后点击右上角的购物车按钮,会弹出侧栏,点击【添加至项目】,然后选择自己刚创建的项目,如图:
3导出字体文件
添加后就可以在项目中看到了,然后前往我 的项目后就可以下载到本地,如图:
下载下来后是个压缩包,里面包含了自己文件,演示文件,演示文件中其实已经有详细的引用方式了。
3.2.项目端引用
前面文件下载完成后就可以做本地的部署了,
项目端引用主要分3步
1.文件下载
将其中的iconfont.css,iconfont.ttf,iconfont.woff,iconfont.woff2放到你想放的静态文件夹下,我这里习惯放在static下,所以在这里新建了个icon,用来存放这些文件,这里看你喜好,自己记得就好
2.CSS引用
然后进入到App.vue中的style进行CSS引用
<style>
@import '@/static/icon/iconfont.css';
</style>
3.CSS引用路径修改
这里是个小坑,因为默认网页中css引用当前文件夹下的字体文件是没问题的,但是在uniapp中需要去修改iconfont.css中的引用字体的文件位置
将
@font-face {
font-family: "iconfont"; /* Project id 3355581 */
src: url(iconfont.woff2?t=1650891154292') format('woff2'),
url('iconfont.woff?t=1650891154292') format('woff'),
url('iconfont.ttf?t=1650891154292') format('truetype');
}
改为如下(记得按你自己的路径来修改)
@font-face {
font-family: "iconfont"; /* Project id 3355581 */
src: url('/static/icon/iconfont.woff2?t=1650891154292') format('woff2'),
url('/static/icon/iconfont.woff?t=1650891154292') format('woff'),
url('/static/icon/iconfont.ttf?t=1650891154292') format('truetype');
}
至此就可以在前端进行引用了,eg:
<i class="iconfont icon-xueyuanguanli"style="font-size: 2rem;color:#ddee33;"></i>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiebgaa
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22