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

  • 苹果备忘录画画怎么自动校正(苹果备忘录画画怎么填充颜色)

    苹果备忘录画画怎么自动校正(苹果备忘录画画怎么填充颜色)

  • 淘宝红包怎么用(淘宝红包怎么用掉)

    淘宝红包怎么用(淘宝红包怎么用掉)

  • 抖音小屏幕怎么设置(抖音小屏幕怎么弄的)

    抖音小屏幕怎么设置(抖音小屏幕怎么弄的)

  • qq续火花有啥意义(qq续火花几点算第二天)

    qq续火花有啥意义(qq续火花几点算第二天)

  • 苹果7plus麦克风启用不成功(苹果7plus麦克风在哪设置)

    苹果7plus麦克风启用不成功(苹果7plus麦克风在哪设置)

  • 录抖音如何声音更大(录抖音声音为什么会延迟)

    录抖音如何声音更大(录抖音声音为什么会延迟)

  • 苹果x老是黑屏白苹果(苹果x老是黑屏怎么办)

    苹果x老是黑屏白苹果(苹果x老是黑屏怎么办)

  • nand flash是什么(nand flash dqs)

    nand flash是什么(nand flash dqs)

  • 快手小店商品为什么审核不通过(快手小店商品为什么在别人快手上看不到)

    快手小店商品为什么审核不通过(快手小店商品为什么在别人快手上看不到)

  • word怎么删除不需要的部分(word怎么删除不可见内容)

    word怎么删除不需要的部分(word怎么删除不可见内容)

  • 钉钉直播卡是什么原因(钉钉直播一卡一卡的)

    钉钉直播卡是什么原因(钉钉直播一卡一卡的)

  • 抖音没有营业执照怎么开通个人小店(抖音没有营业执照怎么开通企业认证)

    抖音没有营业执照怎么开通个人小店(抖音没有营业执照怎么开通企业认证)

  • csdn怎么发布博客(csdn如何发表博文)

    csdn怎么发布博客(csdn如何发表博文)

  • 滴滴平台会监听通话吗(滴滴监听到私下交易)

    滴滴平台会监听通话吗(滴滴监听到私下交易)

  • b612的长腿特效在哪里(b612长腿特效怎么打开)

    b612的长腿特效在哪里(b612长腿特效怎么打开)

  • 手机磕碰小坑如何修补(手机磕了小坑)

    手机磕碰小坑如何修补(手机磕了小坑)

  • 探探设备封禁解除教程(探探设备封禁解封不了)

    探探设备封禁解除教程(探探设备封禁解封不了)

  • 小米max4发布时间(小米max4发布价格)

    小米max4发布时间(小米max4发布价格)

  • 图片显示不出来的原因(为啥相册里面的图片显示不出来)

    图片显示不出来的原因(为啥相册里面的图片显示不出来)

  •  ofo余额怎么退不了(ofo的账户余额怎么退)

    ofo余额怎么退不了(ofo的账户余额怎么退)

  • 如何关掉carplay仅充电(苹果如何关掉carplay)

    如何关掉carplay仅充电(苹果如何关掉carplay)

  • 默认网关不可用老掉线win10解决方法(默认网关不可用频繁掉线)

    默认网关不可用老掉线win10解决方法(默认网关不可用频繁掉线)

  • 青龙面板库(青龙面板库怎么用)

    青龙面板库(青龙面板库怎么用)

  • webpack -v报错:Cannot find module ‘webpack-cli/package.json‘(webpack devserver contentbase)

    webpack -v报错:Cannot find module ‘webpack-cli/package.json‘(webpack devserver contentbase)

  • 车辆使用费属于什么税收分类
  • 价税分离的公式是什么呀
  • 应税消费品是什么意思
  • 基础设施道路建设
  • 抵扣的发票可以部分红冲吗
  • 分支机构需要填报企业所得税纳税申报表吗
  • 自然人转让股权给自己的公司
  • 专用基金计入什么科目
  • 企业所得税按月还是按季度申报
  • 计提增值税小于10万元
  • 成本法和权益法大白话
  • 首次购买税控设备政策
  • 贷款和应收款项在活跃市场中没有报价
  • 税控系统服务质量调查报告
  • 发票不一致是什么原因
  • 重庆国税发票查询真伪查询系统
  • 全国增值税发票查询平台 手机版
  • 个税申报中劳务报酬
  • 纳税人拒不缴滞纳金是否可单独强制执行
  • 企业借款利息税前扣除怎么算
  • 非公益性赠送该怎么进行会计处理?
  • 业务奖金激励制度
  • 什么人适用131419手机号码
  • 预提待摊费用怎么做账
  • 静态回收期计算方法例子
  • 股票退市怎样补仓
  • 各部门领料情况,a产品耗用甲材料3200元
  • cpu性能排行榜天梯图快科技
  • 车站计算机系统组成
  • 巴蒂斯塔卡里
  • php怎么把图片存入mysql
  • mcshield.exe是什么进程
  • 报销差旅费退回余款
  • 财务费用属不属于生产成本
  • iframe嵌套页面点击里面的按钮
  • php实现执行外部操作
  • thinkphp5.0.23
  • 累计折旧当月增加当月减少
  • 项目差旅费能计入项目费用吗
  • 怎么在电子税务局查询进项发票
  • 高速公路通行费增值税税率
  • sqlserver数据库提示授权过期
  • 银行提供资金来源
  • 存货跌价准备的特点
  • 发票申领多久才可以批
  • 一般纳税人季度所得税怎么计算
  • 简易征收的项目进项税可以抵扣吗
  • 职工福利费支出不超过工资薪金总额的
  • 广告公司转让一般多少钱
  • 负数发票跨月怎么报税
  • 支付稿费怎么做凭证
  • 股权转让的资料有哪些
  • 土地作为无形资产需要计提折旧吗?
  • 成本费用利润率一般在什么范围
  • 其他应付款贷方增加还是减少
  • 企业弥补亏损的来源有
  • 职工福利费的好处
  • 账簿的设置和登记要点
  • mysql必知必会mobi
  • WinXP系统能上qq但打不开网页原因分析及解决方法
  • 笔记本电脑的触摸板怎么开启和关闭
  • macOS 10.12.2下PDF崩溃严重怎么回事 macOS 10.12.2下PDF崩溃的原因以及解决办法
  • centos 中文
  • fedora linux安装教程
  • thinkpadx230i5
  • linux c命令
  • win8.1的ie浏览器
  • win10用户账户guest
  • cocos2d游戏源码
  • wind安装
  • android开发手册
  • Perl的Mail::POP3Client模块和Gmail通信实例
  • js实现计数
  • unity资源管理机制
  • javascript自动化
  • python简易
  • js鼠标滑动特效
  • javascript的简介
  • 税务局开蔬菜普票需要几个点
  • 消费税税目税率表2019
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设