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

  • 企业网站建设与推广经验(企业网站建设与网页设计)

    企业网站建设与推广经验(企业网站建设与网页设计)

  • airpods pro是怎么注销原来的主人(airpods pro是怎么检测耳机有无入耳的)

    airpods pro是怎么注销原来的主人(airpods pro是怎么检测耳机有无入耳的)

  • 抖音一天可以关注上限是多少(恢复原来的抖音)

    抖音一天可以关注上限是多少(恢复原来的抖音)

  • 小米手环开关在哪里(小米手环怎么按进去)

    小米手环开关在哪里(小米手环怎么按进去)

  • thinkpadx230上市时间

    thinkpadx230上市时间

  • 全屏手势在MIUI几(miui12全面屏手势失效)

    全屏手势在MIUI几(miui12全面屏手势失效)

  • 笔记本尺寸有哪些(笔记本尺寸哪里看)

    笔记本尺寸有哪些(笔记本尺寸哪里看)

  • 断播原因线下导流是什么意思(断播原因线下导演怎么办)

    断播原因线下导流是什么意思(断播原因线下导演怎么办)

  • 华为mate20hd怎么关(华为mate20hdr怎么开)

    华为mate20hd怎么关(华为mate20hdr怎么开)

  • 华为mate30pro微信怎么分身(华为mate30pro微信来消息没声音)

    华为mate30pro微信怎么分身(华为mate30pro微信来消息没声音)

  • 安卓版本4.4.4下载什么样的微信(安卓版本4.4.4下载QQ)

    安卓版本4.4.4下载什么样的微信(安卓版本4.4.4下载QQ)

  • 发微信对方收不到是什么原因(发微信对方收不到信息咋回事)

    发微信对方收不到是什么原因(发微信对方收不到信息咋回事)

  • 一加7T Pro怎么显示网速(一加7t pro怎样)

    一加7T Pro怎么显示网速(一加7t pro怎样)

  • word2010怎么一键生成目录(word批量操作)

    word2010怎么一键生成目录(word批量操作)

  • ssl协议的特点(ssl协议有什么优缺点)

    ssl协议的特点(ssl协议有什么优缺点)

  • 华为荣耀20处理器是多少(华为荣耀20处理器是什么型号)

    华为荣耀20处理器是多少(华为荣耀20处理器是什么型号)

  • 微信怎么看发消息的时间(微信怎么看发消息的具体时间)

    微信怎么看发消息的时间(微信怎么看发消息的具体时间)

  • 快手b类违规严重吗(快手违反b类是怎么回事)

    快手b类违规严重吗(快手违反b类是怎么回事)

  • 华为eleal00什么意思(华为eleal00什么型号多少钱)

    华为eleal00什么意思(华为eleal00什么型号多少钱)

  • 企鹅电竞如何签约主播(企鹅电竞签约三年有办法提前解除吗)

    企鹅电竞如何签约主播(企鹅电竞签约三年有办法提前解除吗)

  • virtualbox打不开虚拟机怎么办? linux无法访问virtualbox的解决办法(virtualbox打不开虚拟机)

    virtualbox打不开虚拟机怎么办? linux无法访问virtualbox的解决办法(virtualbox打不开虚拟机)

  • 苹果icloud储存空间购买取消方法(苹果icloud储存空间怎么查看内容)

    苹果icloud储存空间购买取消方法(苹果icloud储存空间怎么查看内容)

  • 帝国CMS灵动标签e:loop怎么用(帝国cms灵动标签 PHP变量文章ID加减1)

    帝国CMS灵动标签e:loop怎么用(帝国cms灵动标签 PHP变量文章ID加减1)

  • 应税劳务销售额怎么算
  • 证券交易计税依据
  • 收到所得税退税会计怎么记账
  • 分公司与总公司的法律关系
  • 增值税专用发票抵扣税额是什么意思
  • 赊销现金折扣分录
  • 纳税人领购普通发票要求
  • 没有收汇可以申报吗
  • 土地出让金抵减销项税如何申报
  • 调拨入库的固定资产是否缴税?
  • 材料暂估价比例
  • 异地预缴企业所得税几个点
  • 开具发票财务需要管理吗?
  • 企业给员工购买的团体意外险的被保险人一般是
  • 企业租车费可以抵扣吗
  • 一般纳税人三个条件是什么
  • 发票报账的基本流程
  • 风险纳税人原因查询
  • 定额发票使用年限规定
  • 详解出口退税的涵义
  • 购买银行理财产品被骗怎么办
  • 土地使用税能计入土地转让的土地增值税清算吗
  • 公司用窗帘用什么颜色
  • 发票丢失后可以冲红吗
  • 票据质押后如何行使质权
  • 工程施工科目月末如何结转
  • 公司开办期间账务处理
  • macOS Catalina10.15.2值得升级吗 macOS Catalina10.15.2更新了什么
  • 捐赠固定资产入账价值
  • 分红率与股息率有啥区别
  • 骑自行车的好处功效与作用
  • 广告公司收到广告发票如何入账
  • 利润分配的账务处理如何做
  • 银行同业利息 水利基金
  • 简明易懂的
  • 新购车辆检测费计入原值吗
  • vue computed set get
  • opencv模板匹配原理
  • 开源ei
  • php curl_init
  • php的输出语句
  • bat 进入当前文件夹
  • 财务费用的增加记在哪一方
  • 小规模纳税人季度不超30万怎么做账
  • 怎么防止?
  • 装订会计凭证步骤
  • 稳岗补贴算不算财政补贴
  • 抵扣联明细没认证如何申报
  • 预交税会计分录
  • 贴现法年末偿还金额
  • 接受捐赠固定资产存货等有相关凭据的其成本按什么确定
  • 进口消费品增值税计税依据
  • 股本金退出要交税吗?
  • 电子发票显示错误信息是什么原因
  • 年度计提资产减值准备 好还是坏
  • 房地产开发企业增值税税率
  • 基本户转法人个人账户如何做账
  • 利润为负还要交增值税吗
  • centos7.4
  • tcpsyncookies
  • u深度u盘启动盘制作工具无法进入电脑
  • winxp慢怎么办
  • vi中的命令
  • windows10储存
  • cocos creator开发文档
  • web jquery
  • android面试题简书
  • shell脚本转换文件编码
  • 批处理语言 从入门到精通
  • nodejs 异步io底层原理
  • js 字符编码
  • OKHttp源码解析-ConnectionPool对Connection重用机制&Http/Https/SPDY协议选择
  • bash foreach
  • webpack vue-loader
  • unity3ds
  • 浏览器工作机制
  • jquery :not
  • comparable接口怎么用
  • 河南新乡地税局罗姓病逝
  • 合并方为进行企业合并发生的佣金和手续费怎么处理?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设