在uni-app里引入iconfont

最新推荐文章于 2024-05-11 16:37:28 发布
最新推荐文章于 2024-05-11 16:37:28 发布
阅读量531 收藏
点赞数
分类专栏： 开发问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40121676/article/details/103347319
版权

在uni-app框架中引入iconfont
1.在iconfont中下载你需要的项目，下载后解压
在这里插入图片描述
把红框框的文件放进
在这里插入图片描述
打开iconfont下找到你要添加的图标项目复制代码
在这里插入图片描述
然后所在项目的src/common下
打开iconfont.css
在这里插入图片描述

记得在路径前面加 https !!!

引入图标的方法就是

   <i class="iconfont">&#x33;</i>

就可以啦~

在所引用的图标的vue项目中
在这里插入图片描述

JiAyInNnNn123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni app 使用字体图标
渐离的博客
03-24 410
1.首先登陆iconfont官网，创建自己的项目，找到需要的图标加入购物车，然后添加到项目中 2.生成unicode ,点击下载至本地，解压 3.将解压后的文件放入static目录 4.修改为本地引入方式![在这里插入图片描述](https://img-blog.csdnimg.cn/20200324141151886.png) 5.使用时在App.vue中全局引入该文件@import “./co...
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3055
uniapp 引入iconfont的方法
如何在uniapp项目引入阿里图标库的iconfont(线上)
最新发布
it_laowu的博客
05-11 911
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 1922
uniapp中引入iconfont
uni-app 使用 iconfont
u012746918的博客
03-08 1723
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app多端引入保利威视频
09-22
在本文中，我们将深入探讨如何在uni-app框架中实现多端引入保利威视频云服务，以便在微信小程序、移动端和H5等多个平台上运行。uni-app是一个开源的跨平台开发框架，它允许开发者用一套代码编写，同时发布到iOS、...
uni-app登录实例的实现
10-29
在移动应用开发领域，uni-app是一个备受青睐的跨平台框架，它允许开发者用一套代码实现多端部署，包括iOS、Android、Web等。本实例将详细讲解如何使用HBuilderX工具来开发一个uni-app登录功能。 首先，我们需要了解...
iOS集成听云uni-app插件引入
10-12
3. **引入SDK**：在你的uni-app项目的`main.js`或`main.ts`文件中，引入听云SDK的头文件，以便在JavaScript层调用。这可能需要通过uni-app的桥接机制来实现。 4. **初始化SDK**：在应用启动时，你需要调用SDK的初始...
UNI-APP引入iconfont的方法
qq_24537119的博客
03-05 1526
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
引入阿里iconfont图标方法以及注意事项
热门推荐
tuonioooo
12-27 1万+
背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/   在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标
uniapp项目中引入iconfont图标
weixin_52020362的博客
04-09 862
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
微信小程序开发引入icon图标出现小框的问题
m0_53350325的博客
04-02 1448
在练习引入icon图标时无论怎么更改都会出现小框 首先检查是否在iconfont.json中的font_family是否写了iconfont "font_family": "iconfont", 若还出现小框问题则需要打开icon官网 。先把要插入的图标添加到我的项目中 。 添加后点击 资源管理->我的项目->点击复制代码 把复制下来的代码复制到iconfont.wxss的 @font-face { } 打开download中的 demo_index.html 找到图片的索引名 注意名字
90%的前端都会踩的坑
weixin_42333548的博客
01-06 845
移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。昨日一瞥竟积少成多，稍感诧异。因此分享出来，希望对大家能有所帮助。 兼容问题： 1、iconfont 字...
uniapp引入 iconfont
詹Sir的博客
11-04 702
有时候内置的图标无法完全满足需求，我们可以引用阿里矢量图标iconfont
uni app 使用iconfont 图标
ICode联盟
01-24 2131
针对https://www.iconfont.cn/search/index?q=disconn讲解 key point ： 1、不能下载到本地引用 解决新建自己项目引用自己项目的文件 操作步骤： 1、选择图标添加到购物车 ，右上键购物车点击添加到项目 2、到图标管理我的项目查看项目 2、点击下载到本地获取 iconfont.css...
uni-app接入iconfont图标库
09-12
4. 导入字体文件：在uni-app项目的main.js（或者是对应平台的入口文件）中引入字体文件，可以使用以下代码导入字体文件： ``` import './static/iconfont/iconfont.css' import './static/iconfont/iconfont.ttf' `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值