uni-app字体图标Iconfont的使用

结合自己开发经历，总结在uni框架下使用字体图标的流程。开始之前可以先学习下面的官方文档，通过文档已经能够掌握使用，就不用听我多BB了
文章写得不合理的地方欢迎批评指正

阿里图标库帮助文档
 uni字体图标的使用

建立Iconfont资源

1.登录iconfont官网（没有账号请自行注册登录）
2.找到图标管理->我的项目->然后新建项目:

我的项目

新建项目

3.项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索想要的图标,然后添加到购物车(免费)

添加图标到购物车

购物车图标添加到项目

生成代码

Iconfont资源的使用

uni-app 本地路径图标字体支持情况：
字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式
字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效
字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）

资源的引入（a,b两种方式）

a.字体文件小于40kb，直接引入使用

image.png

<style>
    @font-face {
        font-family: 'iconfont';
        font-weight: normal;
        font-style: normal;
        src: url('https://at.alicdn.com/t/xxxxxxxxxxx.ttf') format('truetype');
    }
    .iconfont {
        font-family: 'iconfont' !important;
        font-size: 30px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-message:before {
        content: "\e604";
    }
<style>

b.字体文件大于40kb，转化为 base64 格式后引用
将字体文件下载到本地==>解压==>Base64编码.ttf后缀文件==>将Base64码复制到项目里
转换工具地址

资源下载

Base64编码文件

<style>
    @font-face {
        font-family: 'iconfont';
        font-weight: normal;
        font-style: normal;
        src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
    }
    .iconfont {
        font-family: 'iconfont' !important;
        font-size: 30px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-message:before {
        content: "\e604";
    }
<style>

注：font-family 使用的时候务必保持一致（可以改名字）。转换的base64内容太长，为不影响阅读，需自行复制替换。微信不支持本地字体图标（即iconfont.css文件添加到项目，并在.vue文件下引用出错），报如下错误

微信不支持本地字体图标

具体使用，为了演示效果，采用多种写法

<template>
    <view>
        <view>
            <!-- 直接复制代码 -->
            <text class="iconfont">&#xe958;</text>
            <view class="iconfont">&#xe958;</view>
            <!-- 引用.css文件生成的style -->
            <text class="iconfont icon-message"></text>
            <view class="iconfont icon-message"></view>
        </view>
    </view>
</template>

iconfont.css文件结构

参考资料

uni-app 引入本地iconfont的正确姿势
 在uni-app项目中使用iconfont
iconfont字体图标的使用方法--超简单!

最后编辑于：2019.08.09 16:03:20