这里说说uni-app怎么引入iconfont,以及在uni-app里需要注意什么(我们一步步来,微信问题在最后面)
1)阿里巴巴矢量图标库创建项目,官网地址
这个大多数前端基本都会,我就不赘述了,不会的上网查查怎么使用
2)添加好你的图标,进到你的项目里
点击“下载至本地”,解压后获得其中两个文件iconfont.css和iconfont.ttf
3)在项目里创建两个文件夹common,static
把iconfont.css放到common文件夹下,把iconfont.ttf放到static文件夹下
(这时候有用图标功能的人可能会有疑问,为什么不把两个文件都放static里,原因是:static文件夹放置的文件,在手机移动端可能会被认为是静态文件,而不进行编译(如less,sass,css),所以需要另外建一个common文件放置iconfont.css)
4)(全局引入iconfont),打开App.vue
在App.vue的style标签里引入你iconfont.css(我这里使用的样式预编译是less)
<style lang="less">
/* 引入iconfont,下面写iconfont.css的存放路径 */
@import "common/iconfont.css";
</style>
5)(在iconfont.css里引入iconfont.ttf)
打开iconfont.css,修改@font-face为下面内容
@font-face {
font-family: "iconfont";
//下面写iconfont.ttf的存放路径
src: url('~@/static/iconfont.ttf');
}
6)(使用iconfont功能)这时候你就能在页面使用图标了
有两种方式,都需要class="icon iconfont"来引入,如下图两个箭头
<template>
<view class="container">
<view class="icon iconfont">第一个箭头</view>
<view >----------------------------------------------</view>
<view class="icon iconfont icon-fanhui">第二个箭头</view>
</view>
</template>
效果
第一个箭头是第一种方式,是引用代码,需要在图标库项目里复制引用代码,如下图
把鼠标移到图标上方,可以看到复制代码
第二种是点开右上角的铅笔头
然后复制font class里的内容,class变成icon iconfont icon-你复制的内容
<template>
<view class="container">
<view class="icon iconfont icon-fanhui">第二个箭头</view>
</view>
</template>
7)微信小程序问题:
打开微信小程序来调试页面,你会发现图标报错或者消失,找了一下原因,原来是iconfont.ttf不支持线下引入,所以要引入线上ttf
我们回到图标库,先“点击生成代码”,然后“点此复制代码”
然后回到iconfont.css,覆盖原先的@font-face,并且在每个url前加上https:
问题解决,所以ttf文件就不用再引入了
但以后每次更新图标库都需要手动生成一下新的线上代码,然后覆盖