uni-app项目引入icon-font图标

最新推荐文章于 2024-07-28 17:53:28 发布
最新推荐文章于 2024-07-28 17:53:28 发布
阅读量155 收藏
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59771575/article/details/131997126
版权

对需要的图标放入购物车内

 点击右上方购物车图标，添加至项目

 点击导航栏上的资源管理下的我的项目，下载至本地

 将这四个文件进行解压到项目

 路径修改

 引入标签就大功告成啦！

 

 

qq_59771575
关注
移动应用开发——基于uni-app框架
m0_61839930的博客
06-17 939
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
wwyxjjz的博客
07-26 1913
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法 简单方便 阿里巴巴图标库：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 近期阿里图标库更新了 没有之前的在线链接直接使用(如下图) 不要慌绝绝子来教你啊 怎么创建项目 加入图标 我这里就不再具体说了 一. 首先打开你的iconfont项目(......
uniapp中如何引入iconfont图标
最新发布
senyuyin的博客
07-28 361
【代码】uniapp中如何引入iconfont图标。
uniapp使用iconfont字体图标
i_am_a_div的博客
03-11 1076
情景1：使用灰色的字体图标 步骤1：下载iconfont 步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下 步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除 删除前的css： 删除后的css： 步骤4：引入： 注意:src字段的url的括号内一定要使用单引号 ①引入位置：你可以直接在app.vue内引入；也可以在main.
uni app 使用iconfont 图标
ICode联盟
01-24 2150
针对https://www.iconfont.cn/search/index?q=disconn讲解 key point ： 1、不能下载到本地引用 解决新建自己项目引用自己项目的文件 操作步骤： 1、选择图标添加到购物车 ，右上键购物车点击添加到项目 2、到图标管理我的项目查看项目 2、点击下载到本地获取 iconfont.css...
uniapp引入iconfont字体图标
qq_39905409的博客
12-09 1684
1、进入阿里图标库添加自己需要的图标到自己创建的项目。 2、将自己添加的图标下载下来 3、解压后将下面两个文件放入自己准备的目录下，这里演示放在static下 4、修改iconfont.css文件内容如下： @font-face { font-family: 'iconfont'; /* project id 2255196 */ src: url('~@/static/iconfont/iconfont.ttf') } 5、在App.vue引入iconfont <style l
uniapp fonticon 字体图标的使用
m0_47104939的博客
11-18 218
uni-app使用字体图标（iconfont）_HRM2454的博客-CSDN博客 上面文章，补充一下： 把css样式的路径加上~@
【uni-app】懂你找图--创建项目到首页推荐模块
weixin_58214412的博客
12-07 952
1. 项目搭建 1.1 新建项目 创建项目 vue create -p dcloudio/uni-preset-vue dnpicture 安装 sass依赖 npm install sass-loader@7.3.1 npm install node-sass@4.14.1 node -v 查看自己的node版本根据node和node-sass版本关系按照相应的sass依赖 运行项目并导入微信开发者工具 npm run dev:mp-weixin ..
uni-app（6）— 组件的基本使用
tiffany_kim的博客
04-16 527
此文为uni-app总结笔记（6）— 组件的基本使用 ( 包含： text，view，button， image，uni-app中的样式，sass/less ) 一： text文本组件的用法 官方文档 text 组件的属性 属性 类型 默认值 必填 说明 selectable boolean false 否 文本是否可选 space string . 否 显示连续空格，可选参数：ensp、emsp、nbsp decode boolean false 否 是否解码
uni-app入门
01-08
uni-app引入了一些新的组件，适应移动端开发需求： - `scroll-view`：可区域滚动视图容器 - `swiper`：可滑动区域视图容器 - `icon`：图标组件 - `rich-text`：富文本，用于渲染各种文字格式和图片 - `progress`：...
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
uniapp引入inconfont自定义导航栏
qq_55272229的博客
08-05 1878
2.将css文件复制粘贴项目的公共css目录和ttf文件导入static目录。2.下载到本地解压后,将其中的ttf文件,放在static静态目录下。3.在page.json中对全局文件进行配置tabBar(导航图标)4.此时就可以在list对导航item添加iconfont属性。1.同上下载到本地,但是需要在项目设置中把base64码下载。uniapp本身的全局设置中有个iconfontsrc属性。1.iconfont将需要的icon添加至项目。4.app.vue进行全局css样式导入。
在uniapp中字体包的导入
m0_48893127的博客
09-12 2242
字体包的导入和使用
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 2058
uniapp中引入iconfont
uniapp 导入文件等图标的用法
weixin_42262889的博客
04-03 2654
要在script中导入 <script> import uniIcon from '@/components/uni-icon/uni-icon.vue' </script> css导入的方法 <style> @import "" </style> 导入模板 <script> import uniIcon from '@/com...
uniapp+打开icofont彩色图标
火腿肠的博客
03-16 294
iconfont uniapp
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 5987
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
如何给uniapp网站添加favicon.ico（3步）
qq_38969618的博客
10-23 3220
第1步：在src目录下新建模板文件xxx.html（内有vconsole移动调试工具代码，可删除）。 <!--template.html--> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
如何在uni-app中引入iconfont图标
shika233的博客
03-19 1万+
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标，这里和vue其他地方引用的步骤一致，如果是第一次使用iconfont请自行百度使用方法，因为我一直使用的在线链接方式引入，所以这里也只介绍这种方式引入uni-app step2 把下面的代码放在app.vue里面 /* icon图标 */ @font-face { font-family...
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、付费专栏及课程。

余额充值