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

  • oppo手机怎么投屏到电脑上面(oppo手机怎么投屏到平板上)

    oppo手机怎么投屏到电脑上面(oppo手机怎么投屏到平板上)

  • 网易云的音乐罐子别人能看到吗(网易云的音乐罐子怎么删除)

    网易云的音乐罐子别人能看到吗(网易云的音乐罐子怎么删除)

  • qq电话最多能打多久(qq电话能打几个小时)

    qq电话最多能打多久(qq电话能打几个小时)

  • 小米专注模式如何打开(小米专注模式如何清零)

    小米专注模式如何打开(小米专注模式如何清零)

  • oppo底部菜单没了(oppo手机底部状态栏为什么没有)

    oppo底部菜单没了(oppo手机底部状态栏为什么没有)

  • oppo手机怎样把联系人放到手机桌面上(oppo手机怎样把照片上传到电脑)

    oppo手机怎样把联系人放到手机桌面上(oppo手机怎样把照片上传到电脑)

  • 抖音怎样设置不让别人下载自己的作品(抖音怎样设置不让别人评论自己的作品)

    抖音怎样设置不让别人下载自己的作品(抖音怎样设置不让别人评论自己的作品)

  • 三星s20怎么截屏(三星s20怎么截屏不显示时间)

    三星s20怎么截屏(三星s20怎么截屏不显示时间)

  • 卡点视频是什么意思(卡视频是什么意思啊免费)

    卡点视频是什么意思(卡视频是什么意思啊免费)

  • 小米是安卓系统手机吗(小米属不属于安卓系统)

    小米是安卓系统手机吗(小米属不属于安卓系统)

  • oppok5手机什么时候上市(oppok5手机什么时候出的)

    oppok5手机什么时候上市(oppok5手机什么时候出的)

  • ios10.3.3微信不兼容怎么办(ios10.3.3微信不兼容怎么办 此时无法下载微信)

    ios10.3.3微信不兼容怎么办(ios10.3.3微信不兼容怎么办 此时无法下载微信)

  • 电脑关机慢的解决方法(电脑关机慢咋办)

    电脑关机慢的解决方法(电脑关机慢咋办)

  • 苹果8plus屏幕参数(苹果8plus屏幕参数配置尺寸)

    苹果8plus屏幕参数(苹果8plus屏幕参数配置尺寸)

  • 苹果手机来电不响铃怎么回事(苹果手机来电不响铃声)

    苹果手机来电不响铃怎么回事(苹果手机来电不响铃声)

  • iphone11港版和国行区别(港版iphone11和国版有什么区别)

    iphone11港版和国行区别(港版iphone11和国版有什么区别)

  • 苹果手表3有摄像头吗(苹果watch3可以拍照吗)

    苹果手表3有摄像头吗(苹果watch3可以拍照吗)

  • 来电秀怎么设置不成功(七彩来电秀怎么设置)

    来电秀怎么设置不成功(七彩来电秀怎么设置)

  • 华为畅享10plus升降摄像头怎么用(华为畅享10plus升级鸿蒙3.0好不好)

    华为畅享10plus升降摄像头怎么用(华为畅享10plus升级鸿蒙3.0好不好)

  • 华为生活服务是干嘛的(华为生活服务是什么功能)

    华为生活服务是干嘛的(华为生活服务是什么功能)

  • 微信号注销了还能查到聊天记录吗(微信号注销了还能通过手机号搜索到吗)

    微信号注销了还能查到聊天记录吗(微信号注销了还能通过手机号搜索到吗)

  • 微信表情变少了怎么回事(微信表情变少了怎么办)

    微信表情变少了怎么回事(微信表情变少了怎么办)

  • 小米触屏音箱怎么打电话(小米触屏音箱怎么样)

    小米触屏音箱怎么打电话(小米触屏音箱怎么样)

  • fan.exe是什么进程 fan进程是什么文件产生的(elf.exe是什么程序)

    fan.exe是什么进程 fan进程是什么文件产生的(elf.exe是什么程序)

  • 斑鹿,滕波尔国家公园,印度 (© Ondrej Prosicky/Shutterstock)

    斑鹿,滕波尔国家公园,印度 (© Ondrej Prosicky/Shutterstock)

  • 关于资源税的问题
  • 小规模出售固定资产税率
  • 企业投资可以税后扣除吗
  • 企业物流成本会计核算问题研究
  • 分期手术
  • 网银转账手续费标准
  • 计提房屋折旧会计分录
  • 跨年的费用需要冲减
  • 单位出租厂房如何开票
  • 认缴制下股权转让如何不交税
  • 增值税留抵税额账务处理
  • 低价销售代替非正常损失避免转出进项税?
  • 开票资料上的电话可以是手机吗?
  • 为他人提供纳税担保, 你的责任都清楚了吗?
  • 劳务费个人还需要交税吗
  • 委外加工企业怎么样降本
  • 个体户生产经营所得怎么报税
  • 会员充值增送如何取消
  • 苹果mac电脑下刻字怎么弄
  • 为什么申报个人所得税还要补税
  • 加计抵减政策销售额占比怎么算
  • 冲销货款应怎么记账
  • php红包源码
  • 帮忙介绍业务
  • win10怎么打开移动中心
  • 收到退款的会计分录
  • nomoreporn.exe - nomoreporn是什么进程 有什么用
  • 六千元左右
  • 利息股息红利个税计算表
  • 公账提取备用金限额
  • php 动态执行代码
  • php扫二维码
  • 阿罗内镇的村落叫什么
  • php开发系统
  • 二维码的实现原理和实现过程
  • 分公司和总公司的账务处理
  • phpcms 1064错误的解决办法
  • 帝国cms使用手册
  • java中double是什么数据类型
  • chrome插件开发拦截ajax
  • mysql常见报错
  • 收据能否入账?如何填写才具有合法性呢...
  • 公司投资款如何返还给股东
  • 土地增值税应纳税额
  • 资金退回怎么记账
  • 广告公司转让一般多少钱
  • 融资租赁财产保全金额是多少
  • 运输途中丢失的物品赔偿
  • 样品定义是什么
  • 赠送客户样品记什么费用
  • 为什么购入股票是综股
  • mysql序列函数
  • sql语句大全实例教程.pdf
  • xp系统多了explorer进程
  • windows vista秘钥
  • 远程桌面登录显示其他用户
  • centos7内存占用大
  • centos基本操作
  • windows无法删除软件怎么办
  • win7系统开机黑屏
  • linux忘记密码怎么重启
  • ubuntu系统电脑开机键盘亮 屏幕不亮
  • ubuntu20.04怎么用
  • win10一直弹werfault,程序也打不开
  • windows8.1开机
  • Win7开机就蓝屏
  • 安装win8.1一直卡着不动
  • /usr/bin/install: 无法创建一般文件‘/usr/local/man/man1/cjpeg.1’: 没有那个文件
  • win8取消自动更新
  • jquery动态设置css
  • include eigen
  • jquery.ui
  • python 聚类算法包
  • javascript中函数
  • JavaScript中setMonth()方法的使用详解
  • js从数组中选出最大的三个数
  • 付了120救护车费怎么报销
  • 医疗费发票查询
  • 信用社股金分红时间
  • 福建失业金领取几个月
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设