在uniapp、vue 中引入iconfont图标

最新推荐文章于 2024-08-08 15:22:16 发布
最新推荐文章于 2024-08-08 15:22:16 发布
阅读量561 收藏
点赞数
分类专栏： study 文章标签： uni-app vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48789376/article/details/115661422
版权
本文详细介绍了如何在uniapp和vue项目中引入并使用iconfont图标。首先，通过iconfont网站选择并下载图标，然后将所需文件添加到项目，接着在uniapp中替换iconfont.css内容并在app.vue引入样式；在vue项目中，将下载的css文件引入main.js，并在assets文件夹存放图标资源，最后即可在项目中正常使用。
摘要由CSDN通过智能技术生成

uniapp图标引入

1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车在这里插入图片描述
2、再将图标添加到项目中，没有项目的，可以先新建一个项目在这里插入图片描述
3、将刚刚选的图标下载到本地

在这里插入图片描述
4、解压后，将需要的文件添加到项目中在这里插入图片描述
5、复制以下代码，将iconfont.css中的内容替换在这里插入图片描述
将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前：在这里插入图片描述
替换后：再复制的内容连接前面要加上https

最低0.47元/天 解锁文章
某绿
关注
专栏目录
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 2001
第一步： 你得拥有一个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
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 9891
全：小程序中使用iconfont的三种方式
vue项目引入iconfont图标
eqizhihui的博客
10-07 2285
点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。
Vue 3 中引入图片的方法
最新发布
码农键盘上的梦
08-08 1385
在 Vue 3 中引入图片的方式与 Vue 2 有所不同，主要是因为 Vite 的使用。通过上述方法，你可以轻松地在 Vue 3 应用中引入和使用图片资源。无论你是需要引入静态图片还是动态加载图片，都可以找到适合的方法。希望这篇文章对你有所帮助！如果你有任何疑问或需要进一步的信息，请随时提问。
vue页面和nvue页面 、引用阿里图标库-图标方法
qq_45500519的博客
07-21 501
引入阿里 字体图标
【iconfont】在vue/uniapp中的使用
weixin_48888726的博客
11-10 256
【iconfont】在vue/uniapp中的使用
vue项目中正确使用iconfont
qq_37046171的博客
04-11 5794
1、打开 iconFont官网 选择自己喜欢的图标，并且添加购物车2、点击购物车，添加至项目3、下载至本地4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 5、在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css...
vue实战开发016:引入iconfont图标库图标
kevinfan的博客
05-13 1379
前面我在Vue中引用了Font Awesome字体图标，Font Awesome目前收入了675个图标（这些是可缩放的矢量图标,可以通过CSS样式来改变图标的大小、颜色、阴影或者其它任何支持的效果），相对element来说还算挺多的，今天我们再来使用一个图库更全的方案，那就是阿里提供的iconfont图标库，这个是目前国内最为强大的矢量图标库中心，里面含有非常丰富的矢量图标库提供下载。 我...
uniapp配置uView3.0与使用iconfont
weixin_52479803的博客
03-13 1644
uniapp配置uView3.0与使用iconfont
uniapp项目使用iconfont彩色图标
weixin_43926731的博客
09-16 2130
uniapp项目使用iconfont彩色图标 在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。 搜索图标 打开icongont官网搜索自己想要的图标，以微信图标为例。 点击自己想要的彩色图标加入到购物车，再点击添加至项目 根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹 下载到本地 这个地方选择Font class，然后点击下载至本地 解压压缩
uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 1021
uniapp正确引入本地iconfont（阿里图标库）
uniapp + vue3 静态图片引入
weixin_68266812的博客
10-08 1013
【代码】uniapp vue3 静态图片引入。
nvue引入字体图标
m0_61950846的博客
10-19 438
nvue引入图标
uni-app项目中使用iconfont
weixin_43939519的博客
03-23 1689
最近在做uniapp 项目，正好要使用iconfont, 顺便做个小分享 1.首先要在iconfont 官网，点击 资源管理--我的项目，点击页面中的➕ 2. 选择需要的图标加入购物车，添加完毕，点击购物车选择添加至项目，选择创建的项目 3. 点击下载至本地，解压后，拷贝iconfont.css 至uniapp 项目中(我放在了common文件夹内)，点击在线链接，拷贝并替换iconfont.css 中的@font-face {} 部分内容4. 在App.vue 页面引入iconfont.css @
Nvue引入字体图标、subNvue使用字体图标
qq_44046765的博客
03-05 1479
如何在使用nvue或subNvue时添加字体图标库（线上地址） 在nvue中使用字体图标 在解决APP端使用video标签时，需要使用到subNvue原生子窗体，因为在APP端，video组件是属于原生组件，层级比所有的vue组件都要高，所以会出现video组件覆盖vue组件的问题，这个时候可以使用coverView组件或者使用subNvue来实现自定义播放器。 在使用subNvue时，需要导入自定义字体图标库，但是常规的css引入并不支持，所以只能使用weex提供的方式来引入字体图标库。 导入 /
uniapp中如何使用iconfont
weixin_48952990的博客
07-21 1396
uniapp中如何使用iconfont
uniapp使用iconfont
qq_44161722的博客
05-07 346
1、把这两个文件在项目的静态资源目录下。2、修改iconfont.css文件。3、最后在app.vue中引入。
nvue使用阿里图标
chenronglong20的博客
05-12 289
1、template <template> <view> <text class="iconfont">&#xe665;</text> </view> </template> 2、js <script> const dom = weex.requireModule("dom"); dom.addRule("fontFace",{ fontFamily:"iconfont", /
uniapp引入iconfont图标
06-28
要在uniapp中引入iconfont图标，可以按照以下步骤操作： 1. 在iconfont官网上选择需要的图标，添加到购物车中并下载。 2. 解压下载的文件，将其中的iconfont.ttf文件复制到项目的static文件夹中。 3. 在App.vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值