uniapp系列-01iconfont小图标的引入

最新推荐文章于 2024-08-31 08:30:00 发布
最新推荐文章于 2024-08-31 08:30:00 发布
阅读量185 收藏
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mylamb/article/details/133082837
版权
本文指导如何从Iconfont获取所需图标，下载到本地，将iconfont.css导入uniapp项目，配置Vue中的index.vue和app.vue以显示图标，最终实现图标在应用中的成功展示。
摘要由CSDN通过智能技术生成

实现iconfont的图标打包引入,效果如下图

iconfont中把需要的图标点击购物车,新建项目,把所选图标拉进项目

然后下载到本地

该文件下载解压缩后找到iconfont.css文件,拉进uniapp中已经创建了的common文件夹

iconfont.css的代码如下

在iconfont.css中选择你要的图标,记住名称

再在pages的index.vue中写一个view组件,把刚才记住的名称放在class="  "中

还有最后重要的一步,引入iconfont.css文件

在app.vue中写如下语句

运行调试,图标出来即成功

mylamb194
关注
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 2065
第一步： 你得拥有一个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正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 1069
uniapp正确引入本地iconfont（阿里图标库）
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-*" *号为名称 -->
uni-app使用小图标的方式
阿小绿的博客
04-15 6966
1.首先我们需要去这里 2.把你需要的小图标加入到购物车 3.点击购物车把小图标【添加至项目】 4.最后下载到本地【解压放到项目中去】 5.如下： 6.在main.js里面引入 import './style/iconfont.css' 7.最后就是在页面中直接通过样式类名使用 <text class="iconfont icon-saoyisao"></text>......
UniaApp引入Iconfont
最新发布
weixin_41562028的博客
08-31 512
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
uniapp引入iconfont
小白白的博客
07-04 637
uniapp在线引入iconfont图标 1.登录iconfont账号(本人使用微博账号登录) 2.创建项目 > 以lianxi项目为例 3.选择自己用到的图标加入到项目 4.生成CSS代码 5.复制代码到浏览器打开，前面加https: 6.复制生成的代码到自己项目中并在所有url开头的代码前面加https:（需要自己创建一个css文件） 7.最后在项目中使用即可 <view class="iconfont icondengji"></view> iconfo
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 2062
uniapp中引入iconfont
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 583
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 414
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
uniapp 中如何使用阿里彩色 iconfont（兼容微信小程序）
qq_28568547的博客
06-15 432
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常用图标.zip
01-15
图标 图标
uniapp引入本地iconfont
王延朕的博客
12-06 1340
2.我们可以用的是 iconfont.css, 我们将 iconfont.css 拷贝至项目的 src/static/font/iconfont.css。1.iconfont官网下载相应代码（
uni-app 使用 iconfont
u012746918的博客
03-08 1758
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
UNI-APP引入iconfont的方法
qq_24537119的博客
03-05 1582
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3117
uniapp 引入iconfont的方法
uniapp引用iconfont图标
weixin_30770495的博客
08-09 4438
不得不说uniapp引入iconfont确实比较坑。下面方法可行： 引入方法： 1.在confont官网找好图标，然后点击复制代码， 2.点击红圈的复制代码后在网页打开，出现如下： 3.然后再uniapp项目下新建common文件夹,common文件夹下新建iconfont.css。把2步打开的代码复制到iconfont.css。记住要将iconfont.css文...
uniapp中在线引入并使用iconfon图标
LELELE__LE的博客
03-18 698
本篇文章主要介绍如果一次简单快速成功在uniapp小程序引入iconfont图标，按照步骤来，保证你一次成功！！！！
uniapp中如何引入iconfont图标
senyuyin的博客
07-28 368
【代码】uniapp中如何引入iconfont图标。
uniapp引入iconfont图标
06-28
### 回答1： 要在uniapp中引入iconfont图标，可以按照以下步骤操作： 1. 在iconfont官网上选择需要的图标，添加到购物车中并下载。 2. 解压下载的文件，将其中的iconfont.ttf文件复制到项目的static文件夹中。 3. 在App.vue文件中引入iconfont.css文件，可以使用@import语句或者在head标签中添加link标签。 4. 在需要使用图标的地方，使用<i>标签，并设置class属性为iconfont和对应的图标类名，例如<i class="iconfont icon-home"></i>。 5. 在样式中设置字体大小、颜色等属性即可。 注意：如果需要使用多个iconfont图标库，需要将它们的字体文件和css文件分别放在不同的文件夹中，并在App.vue文件中分别引入。同时，不同的图标库可能会有相同的类名，需要注意避免冲突。 ### 回答2： UniApp是一个跨平台的应用程序开发框架，它是基于Vue.js开发的。在UniApp中，可以通过引入iconfont图标来实现应用程序的界面美化和功能增强。 Iconfont是一款阿里巴巴提供的矢量图标库，它提供了丰富的图标种类和多种样式，而且可以非常方便地在网页和移动端应用中使用。在UniApp中引入Iconfont图标只需要四个简单的步骤： 第一步，注册Iconfont账号并登录，然后创建一个新的项目，选择需要的图标，然后打包下载。 第二步，将下载的图标包解压，并将其中的iconfont.css和iconfont.ttf文件复制到UniApp项目的static目录下。 第三步，修改App.vue中的main.js文件，在文件中引入iconfont.css文件。具体代码如下： import './static/iconfont.css'; 第四步，在需要使用Iconfont图标的页面中，通过类名的方式引入需要的图标。具体代码如下： <i class="iconfont">&#xeXXX;</i> 其中，XXX为所需图标的Unicode编码。 通过以上四个步骤的操作，就可以在UniApp中引入Iconfont图标了。相比于其他的字体图标库，Iconfont图标库具有占用空间小、加载快等优点，可以提升应用程序的用户体验。同时，因为Iconfont图标是矢量图标，所以可以随意放大缩小而不失真，这也使得它在高分辨率屏幕上有很好的表现效果。总之，UniApp引入Iconfont图标是一个很好的实践操作，可以帮助开发者打造更美观、更实用的应用程序。 ### 回答3： uniapp是一个开发跨平台应用的框架，常用于开发小程序、H5应用和快应用等。为了美化应用界面，我们需要引入图标，而iconfont是一个非常好的图标库。 要在uniapp中引入iconfont图标，我们需要进行以下几个步骤： 1.注册iconfont账户并创建图标库，登录后可在控制台中查看自己的项目ID和字体库ID。 2.到iconfont官网上下载字体文件，将其解压后复制到uniapp项目中的static目录下（也可以放在其他文件夹中）。 3.打开字体图标库，选择需要引入的图标，将它们添加到购物车中，再点击购物车中的“下载代码”按钮，在弹出的框中勾选“Symbol”选项，选择需要生成的字体格式和文件路径，然后点击下载按钮。 4.下载完成后，将下载包解压，把其中的iconfont.css和iconfont.ttf文件复制到uniapp项目中的static文件夹下（或者其他文件夹，但这里需要修改css文件中字体文件的路径）。 5.在需要使用图标的页面的vue文件中，通过style标签引入iconfont.css文件，然后使用<i>标签加上相应的类名即可显示对应的图标。示例代码如下： ```html <style> @font-face { font-family: 'iconfont'; src: url('./static/iconfont.ttf') format('truetype'); } .icon { font-family: 'iconfont' !important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> <template> <div> <i class="icon iconfont"></i> <!-- 这里的类名是在iconfont官网上选择的 --> <i class="icon iconfont"></i> </div> </template> ``` 通过以上步骤，我们就可以在uniapp中引入iconfont图标库，并在页面中使用了。这样可以让应用更加美观，提升用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值