uniapp中使用iconfont（二）

最新推荐文章于 2024-05-07 09:18:21 发布
原创 最新推荐文章于 2024-05-07 09:18:21 发布 · 337 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #vue.js

本文详细介绍了如何在uniapp项目中使用iconfont图标，包括选择图标、添加入库、下载文件并配置到本地项目的过程。通过简单的步骤，读者可以学会如何在自己的项目中正确引入和使用图标。
进入iconfont选择图标，添加入库，下载至本地，具体操操作请移步uniapp中使用iconfont(一)

接下来进入正题
将下载的文件选中.css和.ttf文件
在这里插入图片描述
将这两个文件放入文件夹
在这里插入图片描述

修改路径

在这里插入图片描述
开始使用
在这里插入图片描述

SupAack
关注
在UniApp中如何使用Iconfont
RaAutoit的博客
09-27 1401
本文将详细介绍在UniApp中使用Iconfont的步骤，并提供相应的源代码示例。通过获取Iconfont图标库，导入图标字体文件并配置全局样式，你可以轻松地在UniApp项目中使用各种矢量图标。将下载的Iconfont图标文件解压，你会得到一个包含字体文件（例如.ttf或.woff）和一个样式文件（例如.css或.scss）的文件夹。根据你在Iconfont官网选择的图标，修改类名即可展示不同的图标。在上面的示例中，我们使用了名为"heart"的图标，并将其样式设置为24像素大小和黑色。
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8551
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1908
1：创建/font/iconfont.css 在线方式： @font-face { font-family: "iconfont"; /* Project id 3266214 */ src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype'); } 离线方式： @font-face { font-family: "iconfont";
uniapp使用iconfont字体图标
i_am_a_div的博客
03-11 1326
情景1：使用灰色的字体图标 步骤1：下载iconfont 步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下 步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除 删除前的css： 删除后的css： 步骤4：引入： 注意:src字段的url的括号内一定要使用单引号 ①引入位置：你可以直接在app.vue内引入；也可以在main.
uniapp使用iconfont图标
wb__jf的博客
10-29 5981
uniapp本身是有icon组件的，但由于icon组件各端表现存在差异，所以我们可以通过使用iconfont的字体图标来弥补这些差异。 第一步：在iconfont官网搜索我们需要使用的图标并添加到购物车 第二步：点击购物车，将图标添加至项目 第三步：点击生成代码 第四步：下载至本地 第五步：将iconfont.css复制到项目static文件夹下，并将iconfont官网生成的代码复制到iconfont.css 第六步：页面引用iconfont.css 第七步：使用iconfont图标.
uniapp使用iconfont
qq_44161722的博客
05-07 498
1、把这两个文件在项目的静态资源目录下。2、修改iconfont.css文件。3、最后在app.vue中引入。
uniapp中使用iconfont 图标库
业余前端的职业经历
02-10 2936
我们要是想使用 图标的话，快速的应用到我们的项目中 1.阿里矢量图标库 作为一个前端开发人员还是要了解的 今天就说一下 怎么快速应用到我的uni-app项目中 第一步 选择图标点击 我的项目 没有账号的创建一个账号 登陆下 搜索一个图标 添加到购物车里面 添加到项目中 下载至本地 下载到本地 解压打开 把 iconfont.css里面的代码...
uniapp中使用iconfont
最新发布
02-21
### 集成和使用 IconFont 图标字体于 UniApp 项目 #### 准备工作 为了能够在 UniApp 中利用 IconFont 字体，需先访问 IconFont 官网挑选所需图标并加入购物车。之后，在“我的项目”里找到对应的项目点击“下载”，...
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2775
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
uniapp关于iconfont字体图标使用
无
04-29 2552
7、使用代码，主要是引用iconfont icon-search样式，注意u-search的placeholder设置不了样式，所以重写样式处理。5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录，并在App.vue里引入iconfont.css。6、iconfont.css代码，注意src只保留.ttf后缀名代码，路径设置为iconfont.ttf文件放置路径。1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/)，选择需要的图标添加到购物车。
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
UNI-APP 使用 ICONFONT
thinkingw770s的博客
05-07 468
使用 uni-app 做项目时需要用到 iconfont。和 web 使用略有差别。谨以此记录。 因为 uni-app 不能使用本地字体图标库，所以不能直接下载使用。 1、将iconfont中需要的图标，加入购物车，然后放到项目。生成在线代码，稍后用。 2、下载项目至本地。然后解压取出 iconfont.css 文件。 3、将 1 中的在线代码 copy 替换掉 iconfont.cs...
uni-app使用iconfont
weixin_46646802的博客
07-14 1126
uniapp中iconfont的使用
uni-app中使用iconfont
weixin_51198863的博客
02-20 730
前言 uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样； app端不支持在main.js引入的css样式，需要在style中引用； 微信小程序不支持本地的字体图标文件，需要换成网络路径； 为了一套样式多端适用，我们使用下面这种方式来实现 首先打开阿里巴巴矢量图官网 复制图中的代码，那个是网络路径； 在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon
【uni-app】使用iconfont字体
Erin_jwx的博客
08-11 332
第一步 搜索需要的图标，选择图标添加入库 第二步 网页导航栏的右上角点开购物车，查看已入库图标 第三步 新建项目，尽量把同一个项目中用到的图标放在一起 第四步 将图标下载至本地，解压 第五步 将以下两个文件导入到项目的static下 第六步 修改iconfont.css文件 代码如下 @font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf'); } 第七步 在App.vue中引
uniapp 使用iconfont
weixin_46814321的博客
08-30 1109
APP.vue中：@import url('/static/iconfont-weapp-icon.css');2）在APP.vue中引入：@import '@/static/font/iconfont.css';main.js中：import './static/iconfont-weapp-icon.css'1）将需要的图标添加到购物车，添加到相应的目标项目，如下图下载。2）将下载的文件解压到项目static文件下。6） 将文件引入到main.js或者APP.vue。----点击enter键执行。
uni-app使用iconfont-字体图标
程序员劝退师的博客
08-06 2366
1.挑选需要的iconfont图标 阿里iconfont开源库 2.添加购物车 不亏是做电商的，这里也像购物一样！ 可以多选几个方便后面的测试效果！ 3.下载代码 4.解压文件 5.导入项目 创建static/font目录，将iconfont.css、iconfont.ttf导入到static目录中 6.修改iconfont.css文件 源文件 这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！ 其他几个报错的文件是没有引进来，那是其他平台兼容问题的，移动端
在uniapp中使用 iconfont
m0_71474019的博客
06-01 237
iconfont使用
uni-app引入iconfont字体图标
Moon Star
11-15 832
script： mounted() { const domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { fontFamily: 'iconfont', src: "url('/static/mapIconfont/iconfont.ttf')" }); } template： <text class="iconfont">&#xe920;</text> styl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值