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 991
uniapp正确引入本地iconfont（阿里图标库）
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 1949
第一步： 你得拥有一个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使用阿里云图标
最新发布
weixin_52830464的博客
06-19 234
存放在static/icon目录下。把以下四个文件拷贝出来。1.先把图标下载到本地。
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3049
uniapp 引入iconfont的方法
钉钉微应用iconfont在Android下图标找不到
xiasohuai的博客
05-10 567
低版本android他不支持woff2格式的字体,必须要使用woff格式字体,由于从默认iconfont网站上下载来的字体,woff2排在woff之前,所以导致android无法正确识别到woff了 @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1557465831153'); /* IE9 */ src: url('iconfont.eot?t=1557465831153#iefix') format('embedd
uniapp引入iconfont图标
再简单的事，也要用心做成！
07-22 206
步骤 打开阿里适量图库https://www.iconfont.cn/，找到需要的图标，加入购物车，并把图标加入一个项目 2.点击“生成代码”，生成font-face相关代码；点击下载，生成相关文件 3 找到下载文件中的iconfont.css，复制到项目的static/icontfont的文件夹下；在App.vue文件中引入iconfont.css文件 4.复制步骤3生成的代码，替代iconfont.css文件中的 5.最后使用： ...
uniapp引入iconfont
qq_37953045的博客
07-27 678
uniapp引入iconfont
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在本文中，我们将深入探讨如何在uniAPP中引入Dplayer.js和hls.js库，以实现对m3u8直播流视频的解析和播放。uniAPP是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，应用于多端运行，包括iOS、Android、...
uniapp封装的接口和已经引入uview的模板项目
07-18
【标题】：在“uniapp封装的接口和已经引入uview的模板项目”中，我们主要探讨的是如何在uni-app框架下进行接口封装，并利用uView UI库来构建高效的移动应用模板。 【描述】：uni-app是一个跨端开发框架，它允许...
微信sdk在uniapp中下载引入
04-25
微信sdk，1.6.0
uniapp 在线预览pdf
09-18
首先，我们需要在uniAPP项目中引入这些库，然后通过uniAPP的API与JavaScript进行交互，加载PDF文件并进行转换。这种方式的优点是可以自定义预览界面，但缺点是可能会有性能和兼容性问题，因为转换过程可能比较消耗...
uniapp新建文件保存本地 file.js
07-20
uniapp新建文件保存本地 file.js
uniapp引入 iconfont
詹Sir的博客
11-04 702
有时候内置的图标无法完全满足需求，我们可以引用阿里矢量图标iconfont
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1775
uni引入阿里图标库(iconfont) 1 首先找到自己要的图标 2 添加入库 3 添加到项目（选择或者新建项目添加） 4 下载到本地 5 解压下载的压缩包 6 复制iconfont.css 到项目 复制到项目的common 7 iconfont.css文件添加 以下代码 text[class*="icon-"], view[class*="icon-"], button[class...
uni-app 使用 iconfont
u012746918的博客
03-08 1723
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
uni-app 简单引入iconfont示例（阿里妈妈）
Li_Ning21的博客
02-07 985
找到自己需要的图标，添加到购物车。放到 static/css 中。点击左上角购物车，添加至项目。然后进入项目中，导出。
在 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的方法
qq_24537119的博客
03-05 1525
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
uniapp项目引入iconfont
09-05
在uniapp项目中引入iconfont，可以按照以下步骤进行操作： 1. 在App.vue文件中引入iconfont.css文件，可以通过在style标签内使用@import语法来引入：“@import "./font/iconfont.css";”。 2. 打开iconfont官网，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值