位置: IT常识 - 正文

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

编辑:rootadmin
【小程序开发】uniapp引入iconfont图标及使用方式 🧊 前言

推荐整理分享【小程序开发】uniapp引入iconfont图标及使用方式(小程序开发定制),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序开发定制,小程序开发商城,小程序开发费用,小程序开发流程详细,小程序开发公司十大排名,小程序开发公司十大排名,小程序开发费用明细,小程序开发公司十大排名,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。

位置一:App下原生导航栏的按钮使用字体图标。位置二:页面中的任意位置使用iconfont图标。🌺 正文第一步:打开iconfont官网新建项目并添加自己所需要的图标

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

新建项目

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

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

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

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

下载项目并解压

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

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

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

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

在移动端引用的时候要在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文件使用🎃专栏分享:

本篇:《uniapp中引入iconfont图标及两种常见的使用方式》 更新到这里就结束啦,有什么不理解的地方欢迎评论区见哦。不苒在这里祝大家1024程序员节快乐。

小程序项目实战专栏:《uniapp小程序开发》 前端面试专栏地址:《面试必看》

⏳ 名言警句:说能做的,做说过的\textcolor{red} {名言警句:说能做的,做说过的}名言警句:说能做的,做说过的

✨ 原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/293066.html 转载请保留说明!

上一篇:从庞塞德莱昂河口向灯塔望去,佛罗里达州 (© Jason Sponseller/Shutterstock)(庞塞 德莱昂)

下一篇:【AI作画】使用stable-diffusion-webui搭建AI作画平台(ai作画app)

  • 税款抵扣会计分录
  • 国际反避税措施
  • 漏报了残保金如何调整?
  • 金税四期对企业的六点影响
  • 公司注销后应收款能打到法人账户吗
  • 货款尚未收到用什么记账凭证
  • 增值税普通电子发票
  • 业务招待费扣除计算举例说明
  • 携税宝报税操作流程
  • 金融企业三大使命是什么
  • 期末未缴税额是负数用于抵扣如何填报
  • 物流公司的保险服务属于什么费用
  • 资产置换会计处理办法
  • 如何判断发票是否重复
  • 小规模增值税报表模板
  • 注销税务登记后多久注销工商登记
  • 材料采购差异的影响因素
  • 兼职属于劳动关系还是雇佣
  • 合同的情势变更是什么
  • windows11怎么回退
  • SIMETER.EXE - SIMETER是什么进程 有什么用
  • 增值税发票超额后税率
  • 政府购买企业服务是否交税
  • 乐吾实验学校网站
  • PHP基于什么语言
  • 开发的php程序如何发布
  • 大前端2021
  • move命令移动文件夹下所有文件
  • ps制作折扇效果图
  • 分公司要不要银行开户
  • 企业贷款利息是多少
  • 新公司开账户需要多少钱
  • 如何处理预付和预付差异
  • 资产负债表中的货币资金怎么算
  • 一般纳税企业增值税的核算应当使用
  • 个人所得税表格怎么做
  • sqlserver数据库大小于对索引有影响吗?
  • 赠送代金券账务怎么处理
  • 建筑业服务包含哪些?
  • 公司冲账发票做账流程
  • 餐饮不得抵扣进项税
  • 事业单位现金收支流程图
  • 不合格产品会计处理
  • 汇算清缴缴纳的所得税怎么做账
  • 应收账款可能出现贷方余额吗
  • 调整以前年度多计提的增值税
  • 收银系统入库入错了怎么办
  • 现金流量的折现值公式
  • 如何冲减费用做账
  • 施工单位月末都需要结转什么
  • mysql必知必会在线阅读
  • mysql常见报错
  • 查找共享打印机所在的电脑
  • Windows Server 2008网上邻居打开慢的解决
  • windows xp玩游戏
  • qcwlicon.exe - qcwlicon是什么进程 有何作用
  • linux中make
  • windows 10预览版
  • cocos2d开发的知名游戏
  • jquery table加载数据
  • node·js
  • windows7打开命令提示符
  • linux什么是二进制文件
  • python 数独破解器
  • vue组件的使用步骤
  • node.js网站
  • Unity 中WWW加载 AssetBundle---中文路径
  • jquery事件处理有哪些
  • window10脚本错误
  • Javascript中Array.prototype.map()详解
  • js设计模式有什么用
  • 经营所得个人所得税税率表
  • 兖州宁德新能源官网首页
  • 别人给公司开的普票,怎么查询
  • 申报个税身份证验证不通过
  • 土地增值税清算时间要求
  • 开发票500以下
  • 拆迁补偿的房子是什么性质
  • 烟叶进口关税
  • 接受虚开增值税普票如何补救
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设