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

  • 递延所得税计算题
  • 纳税期是多久
  • 应收出口退税金额无法收回怎么做账?
  • 计入资本公积的固定资产报废
  • 简易征收的进项税可以抵扣吗
  • 企业所得税季度申报表A类
  • 公司银行未开户税务也没开需要做工商年报吗
  • 企业缴纳印花税通过什么科目
  • 从事小额零星经营业务的个人是指
  • 会计信息不采集,证书会失效吗
  • 佣金收入交什么税费
  • 国税地税合并后叫什么名称
  • 营业执照经营范围劳务怎么写
  • 销售方退款回来要怎么处理?
  • 税率调整后之前签的合同用变更吗
  • 公司出差开自己的车怎么计算损耗
  • 增值税普通发票可以抵扣吗
  • 玻璃制品有哪些
  • 免抵退和免退税哪种划算
  • 专票税率开错了有什么影响
  • 在建工程摊销是啥意思
  • 计提法定盈余公积转入利润分配
  • 年度企业所得税申报时间
  • 公积金提取条件
  • 购入商品款项尚未入库
  • 公司购进的商品自己用的,税金怎么走账
  • 解决的英文
  • win10系统怎么永久激活
  • 考勤扣款怎么算
  • 多计提的增值税和附加税怎么冲减?
  • rmb转
  • php写post接口
  • linux 密码重置
  • win10待机唤醒黑屏死机
  • 可转换债券的特点有哪些?
  • 会计分录有哪几种形式
  • macOS Big Sur 11.4 Beta 1(版本号20F5046g)正式发布
  • 代开发票要带什么资料去税务局办理?
  • 付境外人员劳务费
  • 经营性存款人违反规定
  • php遍历结果集
  • 微信公众号php开发教程
  • ubuntu20.04安装opencv3.4
  • checksum 命令
  • phpcms v9官网
  • 物流公司修理班的管理有那些书
  • 公司加班餐费会计科目
  • mysql的lsn
  • 环保工程会计处理
  • 用库存现金支付职工医药费用69元,会计人员
  • 所得税预缴政策
  • 结转生产成本是不是成品入库
  • mysql重置
  • 失业保险金领取多少钱
  • 小规模纳税人出售使用过固定资产
  • 原材料报废卖掉会计分录
  • 应收账款坏账计提比例新标准
  • 制造费用怎么写
  • 购买税控盘费用能全额抵扣吗
  • 公益性捐赠支出计入什么科目
  • 生产中产生的废油漆桶等危险废物应当作为什么贮存
  • 支票拿到银行怎么用
  • sqlserver使用方法
  • sql 常用语录
  • vista电脑密码忘了怎么解除
  • linux常用命名
  • win10家庭版系统怎么样
  • win7如何设置多用户
  • win8.1系统升级
  • 怎么在linux中安装软件
  • opengl绘制球面
  • redis开机自动启动linux
  • nodejs实现登录
  • xml文件的数据如何读取
  • js数组entries
  • jquery-easyui-1.3.3
  • activity的跳转
  • 进项票当月认证怎么操作
  • 电子税务网没开通怎么办
  • 红股派息是赠送股票的意思吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设