位置: 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)

  • 小米手表如何绑定手机(小米手表如何绑定手机号)

    小米手表如何绑定手机(小米手表如何绑定手机号)

  • 光猫los闪红灯是怎么回事(光猫los闪红灯是欠费吗)

    光猫los闪红灯是怎么回事(光猫los闪红灯是欠费吗)

  • 微信名第一次怎么修改(微信初始微信名)

    微信名第一次怎么修改(微信初始微信名)

  • 华为nova5怎么设置省电(华为nova5怎么设置高清通话)

    华为nova5怎么设置省电(华为nova5怎么设置高清通话)

  • 小米手环4nfc版充电要多久(小米手环4nfc版怎么复制门禁卡)

    小米手环4nfc版充电要多久(小米手环4nfc版怎么复制门禁卡)

  • 快手怎么官方认证勾用户是什么意思(快手怎么官方认证√用户是什么意思)

    快手怎么官方认证勾用户是什么意思(快手怎么官方认证√用户是什么意思)

  • 天猫超市发货地在哪里(天猫超市发货地在哪里南京)

    天猫超市发货地在哪里(天猫超市发货地在哪里南京)

  • 会话已过期请重新登录怎么办(会话已过期请重新打开是什么原因)

    会话已过期请重新登录怎么办(会话已过期请重新打开是什么原因)

  • 闲鱼视频通话怎么关掉

    闲鱼视频通话怎么关掉

  • iPhone11插耳机还是外放(iphone11插耳机的时候感觉有问题)

    iPhone11插耳机还是外放(iphone11插耳机的时候感觉有问题)

  • 企业微信登不上去怎么回事(企业微信登不上去怎么办没有好友)

    企业微信登不上去怎么回事(企业微信登不上去怎么办没有好友)

  • 视频会员可以同时几个人用

    视频会员可以同时几个人用

  • 有锁版iphone什么意思(有锁版苹果什么意思)

    有锁版iphone什么意思(有锁版苹果什么意思)

  • 爱奇艺会员续费时间怎么算(爱奇艺会员续费了可以退钱吗)

    爱奇艺会员续费时间怎么算(爱奇艺会员续费了可以退钱吗)

  • 苹果系统13.3更新了什么(苹果手机更新系统13.0)

    苹果系统13.3更新了什么(苹果手机更新系统13.0)

  • hp1106能无线打印吗(hp1010无线打印)

    hp1106能无线打印吗(hp1010无线打印)

  • 卡贴机耗电快吗(卡贴机费电吗)

    卡贴机耗电快吗(卡贴机费电吗)

  • 手机屏幕背光是什么(手机屏幕背光是怎么造成的)

    手机屏幕背光是什么(手机屏幕背光是怎么造成的)

  • 安卓怎么永久屏蔽网站(安卓怎么永久屏蔽软件)

    安卓怎么永久屏蔽网站(安卓怎么永久屏蔽软件)

  • 怎么一次性删除微信好友(怎么一次性删除word表格里的文字)

    怎么一次性删除微信好友(怎么一次性删除word表格里的文字)

  • iphone7还原后无法激活(iphone7还原后无法激活修理费用)

    iphone7还原后无法激活(iphone7还原后无法激活修理费用)

  • 闲鱼扣分怎么查(闲鱼扣分查询)

    闲鱼扣分怎么查(闲鱼扣分查询)

  • 桌山,南非开普敦 (© 4FR/Getty Images)(桌山 开普敦)

    桌山,南非开普敦 (© 4FR/Getty Images)(桌山 开普敦)

  • 帝国cms源码怎么安装(帝国cms商城源码)

    帝国cms源码怎么安装(帝国cms商城源码)

  • 企业申报个税软件怎么下载
  • 个人开具服务费发票税率
  • 代扣个税的会计分录怎么做
  • 礼品的进项税能抵扣吗
  • 私车公用去税务局开什么发票
  • 公司提供午餐的目的
  • 预提费用报税时填哪里
  • 帮别人买交强险,受益人是我,有影响吗
  • 企业采购哪些品类
  • 企业亏损法定盈亏是什么
  • 出口退税业务提醒信息包括哪些
  • 如何进行无形资产核算
  • 购进国产设备的增值税处理规定
  • 住房租金专项附加扣除申报方式
  • 公司老板个人卡收款 出纳有责任吗
  • 企业转给法人的流程
  • 以前年度损益调整属于哪类科目
  • 股东打入公户的钱怎么做账
  • 管理人员工资计入管理费用吗
  • 小规模没有进项票可以开销项票吗
  • 安装工程开发票
  • 从业人数如何计算
  • 自然人办税服务平台怎么登录和注册
  • 小额纳税人可以开6%专票吗
  • 企业所得税季报怎么申报
  • 企业破产应收账款要发询证函吗
  • 收到的出口退税款需要并入利润总额吗
  • 退回社保费的会议记录
  • 你需要来自system的权限怎么解决
  • 广告费和业务宣传费税前扣除基数
  • win10电脑文件夹打不开
  • macbookair怎么设置屏幕
  • 临时 文件夹
  • mini program是什么
  • PHP:iconv_set_encoding()的用法_iconv函数
  • 差旅费包干什么意思
  • 空调安装还要收费
  • 购进商品发生溢余的核算
  • 原生php写接口
  • 存货短缺会计处理
  • 应收票据年末计息的分录
  • 土地使用权转让法律规定
  • php对象的概念
  • 个人往来款如何转为公司股权
  • 应收账款与企业价值的关系
  • Linux Howtos: C/C++ > Sockets Tutorial
  • 入库税款异常怎么处理好
  • 建筑施工企业收入怎么确认
  • mongodb创建库
  • 小企业会计准则没有以前年度损益调整科目
  • 房地产业具体怎么做
  • 代开发票可能遇到的问题是?
  • 财务报表现金流量表怎么填
  • 私立幼儿园规模标准
  • 其他应收怎么转收入
  • 重大影响包括50%吗
  • 限定性净资产举例
  • 免缴教育费附加什么意思
  • 新公司建立 需要先做哪行
  • sql数据库性能
  • mysql -u -p -s
  • 运行linux
  • win7开始菜单路径在哪里
  • ubuntu安装quagga
  • win8系统怎么搜索软件
  • win1020h2版好不好
  • win8无法识别存档文件
  • linux文件压缩和备份实验
  • win7找回删除的文件
  • android 布局
  • html淘宝搜索框代码
  • 原生js实现节日变化
  • network备份软件
  • javascript如何绘制曲线
  • javascript要怎么学
  • jquery调用iframe中的方法
  • 已经开票的房子还能退吗
  • 酒店退房不到退房时间
  • 四川税控
  • 地税服务费算什么科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设