uni-app 导航栏使用iconfont 字体图标（unicode引用方式）

最新推荐文章于 2024-02-22 14:25:42 发布
最新推荐文章于 2024-02-22 14:25:42 发布
阅读量3k 收藏 2
点赞数
分类专栏： VUE学习笔记 uni-app 文章标签： 导航栏 iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44433499/article/details/113344697
版权

在这里插入图片描述
unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件 ，新建一个专门存放文件夹。
在这里插入图片描述
在这里插入图片描述
复制 &#xe73b 设置导航栏字体图标：

在这里插入图片描述
"text": "\ue73f",
"fontSrc":"/static/iconfont/iconfont.ttf"

在这里插入图片描述
效果图如下：
在这里插入图片描述

前端学习007
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
10-16
主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条,需要的朋友可以参考下
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板 官网地址 平台兼容说明 模板说明： 基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理 状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器中失去代码静态追踪和提示“”使用方式可参考： 模板为了轻量化只保留了常用的组件，需要其他组件自行添加，，这里不推荐使用除官方外的扩展组件，因为打包成多端可能会有兼容问题，所以我习惯自己写，这样代码会更少 已经配置好在manifest.json文件中h5端请求代理，不需要可剔除 预装了sass，部分注意事项请看uni.scss代码注释 注意：vue.config.js 中配置的 css.loaderOptions 是无法在当前项目生效的，可能是uni-app项目设定和标准vue-cli项目设定不一样导致的，需要在uni.scss文件全局引入即可，具体看代码 目录说明
uniapp常用图标.zip
01-15
图标 图标
uniapp开发移动端（包括小程序）引入iconfont字体库，使用方法
最新发布
feiyu的博客
02-22 666
uniapp iconfont字体库 微信小程序
uniapp 自定义unicode 并使用
MtangEr的博客
06-28 2442
在page.json 里面使用阿里图标库unicode码 往项目中体添加图标的方法 1、在阿里矢量图标库将想要的图标加入购物车，然后在购物车中将图标添加到项目； 2、到我的项目中，将图标下载使用 一、在阿里图标库-- 自己的项目里面 ，选中unicode方式，然后点击下载本地 二、下载文件里面的iconfont.tff 粘贴到自己项目里面的static下面 三、在pages.json 里面，修改fontSrc的路径，一定要用本地路径，text的属性 一定要保留\u ...
uniapp中讲unicode图标当作字符串传给子组件不编译
m0_47435082的博客
03-23 288
uniapp中用到了unicode的图标的情况下，封装组件的时候需要传给子组件的时候会遇到不编译的情况，如下。这个时候我们可以改用这种格式，将&换成\，将#xe换成ue即可。
iconfont 图标如何在uniapp中的tabBar使用
qq_40259123的博客
02-20 4540
iconfont 图标如何在uniapp中的tabBar使用
关于 uniapp 引入iconfont图标使用Unicode 方式失效解决
HHH917的博客
02-21 1725
问题 直接在html写入没问题 但是 如果使用js动态引入html使用{{}}赋值则会出现引入图标失效； 解决 写另一种unincode码的表达式 格式一：&#XXXX;&#XXXX; 示例：您好 结果：您好 格式二：\uXXXX\uXXXX 示例：\u60a8\u597d 结果：您好 格式三：&#DDDDD;&#DDDDD; 示例：您好 结果：您好 这里我们把格式三的表达方式改为格式二； 可以正常显示图标 也就是从 <text >&#x
uniapp添加顶部导航栏并且使用iconfont图标
07-19 2458
三、在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目static文件夹里，然后再打开iconfont.css里查看unicode编码。四、最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\u***"，然后重启就实现了。特别需要注意的是要将字体css中的替换为\ue605，否则识别不了。六、在对应的页面用event监听，在事件里填写想实现的效果。一、在阿里矢量图选择自己喜欢的图标，然后点击收藏。二、右上角下载全部已经收藏了的图标代码。...
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
UNICODE编码转中文汉字
csdn_xiaoye的博客
04-30 1350
function unicode_decode($unistr, $encoding = 'utf-8', $prefix = '&#', $postfix = ';') { $arruni = explode($prefix, $unistr); $unistr = ''; for($i = 1, $len = count($arruni)...
uniapp nvue三步使用阿里字体图标
chenronglong20的博客
11-11 407
第一步：复制unicode码 第二步：复制链接加https，或者下载至本地 第三步：添加样式
uniapp脑瘫式学习
LZC_yEllOwBooK的博客
08-02 188
uniapp中使用iconfont的方法：首先下载需要的图标；然后选择unicode点击生成代码；接着回到iconfont.css并且打开css文件；最后需要在【//at】前面加上【https:】，并调用iconfont。uniapp中如何使用iconfont-uni-app-PHP中文网。rpx和vx一样 750为准。uniapp 引入 icon。.....................
uni-app自定义导航icon字体库的问题
weixin_33774883的博客
12-27 394
官方文档: 一开始不是很理解，因为在这个平台 iconfont 生成的unicode代码是&#xe604;这样的，根本用不了，不断测试下用把&#x改成\u就可以了 1.首页在iconfont上传需要用的svg文件 iconfont使用教程官网有2.下载ttf字体文件：3.把ttf字体文件放到uni-app项目里面4.最终...
uniapp开发问题记录字体引入（一）
花落微凉梦清幽的博客
08-15 1343
该篇博文主要是对uniapp开发遇到问题的记录，之后会逐步更新。 一、uniapp导入阿里巴巴字体库 首先在阿里巴巴矢量图标库中收集自己要的字体，专门建立一个项目，然后点击下载到本地，解压，把其中的iconfont.css拷贝到自己的项目下（可以新建一个common/css目录），然后在自己的APP.vue中引入，然后在点击“查看在线连接”——选择Unicode，点此复制代码，把这代码复制到刚才的iconfont.css文件中，添加上https，如下图： 使用：如下1在class中加...
自学uniapp听课笔记
魏依一的博客
02-07 449
自学uni-app记录
uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 911
uniapp正确引入本地iconfont（阿里图标库）
uni-app接入iconfont图标库
09-12
### 回答1： 要在uni-app中使用iconfont图标库，您需要执行以下步骤： 1. 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 2. 下载您的图标包并解压到您的本地目录中。 3. 在您的uni-app项目中，将iconfont字体文件复制到您的静态资源目录中。 4. 在您的样式文件中，引用iconfont字体文件，并为图标定义样式。 5. 在您的模板文件中，使用字体图标的编码或名称添加图标。 示例代码： ``` <template> <view> <text class="iconfont icon-menu"></text> </view> </template> <style> @font-face { font-family: "iconfont"; src: url('/static/iconfont/iconfont.eot'); src: url('/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('/static/iconfont/iconfont.woff2') format('woff2'), url('/static/iconfont/iconfont.woff') format('woff'), url('/static/iconfont/iconfont.ttf') format('truetype'), url('/static/iconfont/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-menu:before { content: "\e623"; } </style> ``` ### 回答2： 要在uni-app中接入Iconfont图标库，可以按照以下步骤进行操作： 1. 首先，登录Iconfont官网（www.iconfont.cn），注册并登录账户。 2. 在Iconfont官网上搜索需要使用的图标，选择好后添加到购物车。 3. 在购物车页面点击下载，选择uni-app项目，并选择SVG格式进行下载。 4. 下载完成后解压文件，可以看到一个包含所有图标的文件夹。 5. 在uni-app项目的static文件夹下创建一个新的文件夹，例如命名为iconfont。 6. 将解压后的图标文件夹中的字体文件（通常以.ttf或.otf为后缀）复制到刚刚创建的iconfont文件夹中。 7. 在uni-app的项目目录中找到并打开App.vue文件，将以下代码添加到style标签中： ``` @font-face { font-family: 'iconfont'; src: url('./static/iconfont/iconfont.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 8. 在需要使用图标的页面中，可以使用类似以下代码的方式引用图标： ``` <text class="iconfont">&#xeXXX;</text> ``` 其中，`&#xeXXX;` 是图标对应的Unicode编码，在iconfont官网上找到对应图标的Unicode编码即可。 9. 最后，编译运行uni-app项目，就可以在页面中看到使用了Iconfont图标库的效果了。 以上就是在uni-app中接入Iconfont图标库的简单步骤。 ### 回答3： uni-app是一个跨平台开发框架，可以方便地开发出同时适用于多个平台的应用程序。在uni-app中接入iconfont图标库可以通过以下步骤完成： 1. 导入iconfont字体文件：首先，在iconfont官网上选择适合项目需要的图标，然后将图标添加到购物车中，并选择图标的格式为“symbol”，下载得到一个包含字体文件的压缩包。 2. 解压字体文件：将下载得到的压缩包解压，得到一个包含字体文件的文件夹。 3. 复制字体文件：将字体文件夹中的iconfont.ttf文件复制到uni-app项目的static目录下，这样字体文件就被放置在了静态资源目录中。 4. 导入字体文件：在uni-app项目的main.js（或者是对应平台的入口文件）中引入字体文件，可以使用以下代码导入字体文件： ``` import './static/iconfont/iconfont.css' import './static/iconfont/iconfont.ttf' ``` 5. 使用图标：现在可以在uni-app的页面代码中使用iconfont图标了。可以通过以下方式使用图标： ``` <i class="iconfont icon-图标名称"></i> ``` 其中，icon-图标名称是在iconfont官网中给图标定义的类名。 通过以上步骤，就成功地将iconfont图标库接入到uni-app项目中了。你可以根据需求选择合适的图标，并在页面中使用它们，从而增加应用的视觉效果和体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值