【小程序开发】uniapp引入iconfont图标及使用方式 - 设计每日一贴---北京兰亭妙微/UI设计公司

【小程序开发】uniapp引入iconfont图标及使用方式

2023-2-6 前端达人

第一步：打开iconfont官网新建项目并添加自己所需要的图标

这里是iconfont的网址链接： iconfon官网

新建项目

$\textcolor{red} {不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已}$

App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示
按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头，如 “\ue123”（注意不能写成"\e123"）。

选择自己需要的图标加入购物车再添加到项目中

在这里插入图片描述

第二步：下载我们所需要的iconfont.css文件并引入到项目中

在这里插入图片描述

下载项目并解压

在这里插入图片描述

将iconfont.css文件复制放到我们的项目中去，一般放在static静态文件目录下

第三步：修改iconfont.css文件中的内容并全局引用

在这里插入图片描述

需要注意的是，当我们在项目中新添加了图标后，需要重新复制修改iconfont.css中的内容，要不然新添加的图标是找不到的

在这里插入图片描述

在移动端引用的时候要在App.vue文件中进行全局注册，而不是main.js中

第四步：使用iconfont图标进行开发

在开发中我们常用的有两种方式，这两种方式以及注意事项我在以下内容都有演示：

在页面文件中直接使用标签
使用APPplus原生的自定义导航栏iconfont右侧自定义图标

1.在页面文件中直接使用标签

在这里插入图片描述

两种方式代码的获取方式如下图所示：

使用uniCode码

Font Class 名称

在这里插入图片描述

在这里插入图片描述

2.使用APPplus原生的自定义导航栏iconfont右侧自定义图标

使用iconfont图标的文件内容（忽略css样式）：
在这里插入图片描述
需要配合static目录下的iconfont.tff文件，这个文件在我们下载到本地的时候那个目录中，与iconfont.css在一个目录中：

pages.json文件中配置iconfont图标：

这三步完成，我们配置自定义原生导航栏的自定义图标就完成啦！

五：需要注意的点写在这里：

iconfont官网创建项目的时候，不要勾选 $\textcolor{red} {彩色}$ 那个多选框，否则使用的时候不能更改颜色
如果项目重新添加了新的图标，需要重新生成在线链接，更新iconfont.css文件
自定义原生导航栏使用iconfont图标时，必须配合iconfont.ttf文件使用

作者：彩云sky
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

« 用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine） web3:区块链常见的几大共识机制及优缺点 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档