uniapp引入本地iconfont

已于 2023-12-06 16:38:28 修改
阅读量1.2k 收藏 7
点赞数 4
分类专栏： uni-app 文章标签： uni-app
于 2023-12-06 16:16:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43778556/article/details/134834588
版权

1.iconfont官网下载相应代码（iconfont官网）
2.我们可以用的是 iconfont.css, 我们将 iconfont.css 拷贝至项目的 src/static/font/iconfont.css
在这里插入图片描述

3.在使用的地方 导入 iconfont.css，我这里默认导入在 App.vue 中:

@import "./static/font/iconfont.css";

4.在页面中使用

<view class="iconfont icon-xxx"></view>
十友九
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 993
uniapp正确引入本地iconfont（阿里图标库）
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在本文中，我们将深入探讨如何在uniAPP中引入Dplayer.js和hls.js库，以实现对m3u8直播流视频的解析和播放。uniAPP是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，应用于多端运行，包括iOS、Android、...
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3055
uniapp 引入iconfont的方法
uniapp使用阿里云图标
最新发布
weixin_52830464的博客
06-19 245
存放在static/icon目录下。把以下四个文件拷贝出来。1.先把图标下载到本地。
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 9378
全：小程序中使用iconfont的三种方式
uniapp引入阿里图标库iconfont的三种方式
Hou_Qiang的专栏
05-10 3777
一、本地引入 1、下载font class文件至本地 2、解压后，将字体文件.ttf,.woff,.woff2和iconfont.css一起拷贝到static目录下 3、修改iconfont.css文件（非常重要） @font-face { font-family: "iconfont"; /* Project id 2142473 */ src: url('~@/static/iconfont.woff2?t=1620622127571') format('woff2'),
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 1922
uniapp中引入iconfont
微信sdk在uniapp中下载引入
04-25
微信sdk，1.6.0
uniapp封装的接口和已经引入uview的模板项目
07-18
【标题】：在“uniapp封装的接口和已经引入uview的模板项目”中，我们主要探讨的是如何在uni-app框架下进行接口封装，并利用uView UI库来构建高效的移动应用模板。 【描述】：uni-app是一个跨端开发框架，它允许...
uniapp 在线预览pdf
09-18
首先，我们需要在uniAPP项目中引入这些库，然后通过uniAPP的API与JavaScript进行交互，加载PDF文件并进行转换。这种方式的优点是可以自定义预览界面，但缺点是可能会有性能和兼容性问题，因为转换过程可能比较消耗...
uniapp新建文件保存本地 file.js
07-20
uniapp新建文件保存本地 file.js
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 911
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
UNI-APP引入iconfont的方法
qq_24537119的博客
03-05 1526
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
4.uniapp如何引入iconfont图标
m0_56986233的博客
03-19 3271
1.准备一份iconfont图标库 这里我给大家省功夫，代码如下 @font-face { font-family: "iconfont"; /* Project id 3231515 */ src: url('//at.alicdn.com/t/font_3231515_h5tzgobi5z.woff2?t=1646898877456') format('woff2'), url('//at.alicdn.com/t/font_3231515_h5tzgobi5z.woff?t=164
uniapp项目中引入iconfont图标
weixin_52020362的博客
04-09 862
uniapp引入iconfont图标
在 uni app项目中引入 iconfont (本地引入和在线引入方式)
dongxiaogang5_5的博客
07-05 2182
首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2） 找到需要的字体图标，如果创建项目组的话，就在–我的项目–点击，下载至本地；如果是直接加入购物车的话，就直接点击下载代码； 这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）： 将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;打开网址：
uni-app 简单引入iconfont示例（阿里妈妈）
Li_Ning21的博客
02-07 988
找到自己需要的图标，添加到购物车。放到 static/css 中。点击左上角购物车，添加至项目。然后进入项目中，导出。
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1776
uni引入阿里图标库(iconfont) 1 首先找到自己要的图标 2 添加入库 3 添加到项目（选择或者新建项目添加） 4 下载到本地 5 解压下载的压缩包 6 复制iconfont.css 到项目 复制到项目的common 7 iconfont.css文件添加 以下代码 text[class*="icon-"], view[class*="icon-"], button[class...
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 ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值