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

  • 应交代扣利息税
  • 财务软件大概多少钱
  • 销售固定资产清单怎么做
  • 调整上年度损益
  • 进项税抵扣销项税怎么做账
  • 凭证审核签字操作只能
  • 离婚财产分割涉及偷税漏税可以移交税务局调查吗
  • 盘盈存货会计处理会计分录
  • 银行承兑汇票贴现率多少
  • 生产中材料的合理损耗核算
  • 补发工资计算公式
  • 公司代缴的社保个人账户能不能查到
  • 行政单位年初预算怎么做
  • 投资理财产品的优势和劣势
  • 加计扣除农产品包括哪些
  • 物业公司代收供暖费,可以开发票吗
  • 旅游业差额的会计分录
  • 高温补贴需要交个人所得税吗2019
  • 如何确定增值税以旧换新方式下销售货物的销售额
  • 视同销售收入如何调整?
  • 年初建账的期初余额
  • 个税系统人员信息一直在验证中
  • 个人所得税专项扣除子女教育标准
  • php面向对象优点,缺点
  • php string函数
  • ctrl起什么作用
  • 竣工结算的依据有哪些?
  • 社保缴纳基数相差多少
  • 日本北海道 (© Hiroshi Yokoyama/eStock Photo)
  • 医院个人缴费什么意思
  • 职工福利费包括奖金吗
  • 北极野生动物
  • 梅尔加足球俱乐部
  • lastlog日志
  • 母公司与子公司交易属于关联交易吗
  • 残保金工资总额是计提还是实发
  • php 注入
  • 记账凭证的主要作用有
  • 建筑公司包含哪些业务
  • 境外捐赠入账
  • 营业外收入在现金流量表中填入哪列
  • python对应位置相乘
  • 航天信息服务费的会计分录
  • 员工个人所得税申报方式选哪个
  • 未抵扣的进项发票,开出红字信息表,需要做进项税转出吗
  • 进项税额有留底税额吗
  • mysql_real_query
  • 免征增值税个税计税依据
  • 一般纳税人应如何报税
  • 对公账户 退款
  • 银行转账费用多少钱
  • 银行承兑汇票提示付款期为几天
  • 旅行社差额征税全额开票和差额开票
  • 收到海关进口关税怎么办
  • 营业税金及附加怎么计算
  • 增值税附加税印花税都是什么
  • 工资扣员工的罚款入什么科目
  • 企业所得税缴纳模式
  • 利息保障倍数为0说明什么
  • 工程材料增值税抵扣比例
  • 企业会计准则和小企业准则的区别
  • 企业应当在
  • 固定资产净值怎么算
  • mysql获取表行数的方法
  • sqlserver 复制表 保留默认值
  • centos7添加ip地址
  • linux增加命令
  • 蓝屏 win7
  • linux系统中
  • linux awk nr
  • 怎么把系统从win10换成win7
  • javascript教程chm
  • nodejs 回调
  • 统计文件个数linux
  • unity如何动态刷新滚动列表
  • jquery查找节点
  • 第十三个人
  • 赞美税务干部对联大全集锦
  • 一般纳税人买车可以抵扣进项吗
  • 北京朝阳区国税局时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设