在uniapp中使用 iconfont

已于 2023-06-01 12:17:13 修改
阅读量179 收藏
点赞数
文章标签： uni-app
于 2023-06-01 12:14:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71474019/article/details/130985470
版权

1.选择所需图标加入购物车，并且新建项目加入至项目中

 

2.下载至本地

 3.打开压缩包，将iconfont.css文件放入项目中

4.将框起来的代码替换为第二部生成的代码，并且将在//前面加 https:

5.在App.vue中引入图标（移动端在App.vue中引用）

 6.在不同页面直接使用

妥当123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 1967
第一步： 你得拥有一个uniapp项目 第二步 点击iconfont官网 在首页选好图标，在项目中新建一个css 将上面的1复制在css中，再点开下面这个链接 再复制这个，在css中，下面就是css的代码了 @font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 548
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
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-*" *号为名称 -->
如何在uniapp中使用iconfont图标？
08-27 1983
第一步: 从iconfont下载icon图标 第二步：把下载文件解压，把iconfont.css 和iconfont.ttf 放到如下项目目录中 第三 iconfont.css 文件第一段改为下图 第四，项目中使用如下图 ...
UNI-APP 使用 ICONFONT
thinkingw770s的博客
05-07 338
使用 uni-app 做项目时需要用到 iconfont。和 web 使用略有差别。谨以此记录。 因为 uni-app 不能使用本地字体图标库，所以不能直接下载使用。 1、将iconfont中需要的图标，加入购物车，然后放到项目。生成在线代码，稍后用。 2、下载项目至本地。然后解压取出 iconfont.css 文件。 3、将 1 中的在线代码 copy 替换掉 iconfont.cs...
uni-app使用iconfont
weixin_46646802的博客
07-14 1000
uniapp中iconfont的使用
uni-app引入iconfont字体图标
Moon Star
11-15 733
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
uniapp项目使用iconfont彩色图标
weixin_43926731的博客
09-16 2103
uniapp项目使用iconfont彩色图标 在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。 搜索图标 打开icongont官网搜索自己想要的图标，以微信图标为例。 点击自己想要的彩色图标加入到购物车，再点击添加至项目 根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹 下载到本地 这个地方选择Font class，然后点击下载至本地 解压压缩
uniapp 中如何使用阿里彩色 iconfont（兼容微信小程序）
qq_28568547的博客
06-15 389
1、在自己图标库项目中下载到本地： 2、解压 3、shift+右键 打开powershell 窗口 执行一下代码 npm install -g iconfont-tools 4、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 按一下操作 5、目录会多了个iconfont-weapp文件 进入文件把 iconfont-weapp-icon.css复制到 static 文件中 6、在app.vue中导入 @import './
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1763
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";
在uni-app项目中简单使用iconfont字体图标
yanyunqi02的博客
05-13 4041
简单的使用iconfont图标
uniapp使用iconfont字体图标
i_am_a_div的博客
03-11 929
情景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字体库
全盛
03-27 2147
https://www.iconfont.cn在图标库中选择需要的图标添加至自己的项目中 在我的项目中点击下载至本地，项目中的所有图标会打包下载至本地。 打开本地的下载包，选择iconfont.css文件用记事本打开，将文件中内容复制后粘贴至uni项目APP.vue中的style块中。 添加代码后将多余代码删除 src后面只留下一个url 代码块后面留...
在uni-app使用iconfont中的图标
最新发布
码农键盘上的梦
04-15 4573
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp中使用iconfont（二）
SupAack的博客
06-18 225
进入iconfontt选择图标，添加入库，下载至本地，具体操操作请移步uniapp中使用iconfont(一) 接下来进入正题 将下载的文件选中.css和.ttf文件 将这两个文件放入文件夹 修改路径 开始使用
uni-app 引用阿里iconfont
zhongli_的博客
06-08 207
app.vue <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('A...
uniapp使用iconfont图标全图片演示保姆级教程
Ciao345的博客
07-15 717
然后再将紫色框里的文件iconfont.css复制或移动到根目录下的任意新文件夹中 这里也是方便区分 我在根目录下新建了一个common文件夹 然后放在这里面。随后我们就在需要只用的页面导入使用就好 我这里演示局部导入 全部导入只需要在app.vue中输入一样的代码就好。然后将红色的框里面的文件复制或者移动到uniapp项目下的static目录里面 最好新建一个文件方便管理 如图。如果觉得写不好 还请轻点喷。
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 1976
uniapp中引入iconfont
uniapp项目引入iconfont
09-05
在uniapp项目中引入iconfont，可以按照以下步骤进行操作： 1. 在App.vue文件中引入iconfont.css文件，可以通过在style标签内使用@import语法来引入：“@import "./font/iconfont.css";”。 2. 打开iconfont官网，新建一个项目并添加需要的图标。 3. 在iconfont文件中，包含了iconfont.ttf和iconfont.css两个文件。需要将iconfont.ttf文件转换成base64格式。你可以使用一个转换工具，例如https://www.giftofspeed.com/base64-encoder/来进行转换。 通过以上步骤，你就可以成功在uniapp项目中引入iconfont图标了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [UNI-APP引入iconfont的方法](https://blog.csdn.net/qq_24537119/article/details/114400471)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [【小程序开发】uniapp引入iconfont图标及使用方式](https://blog.csdn.net/qq_49002903/article/details/127445998)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值