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

最新推荐文章于 2024-08-31 08:30:00 发布

mylamb194

最新推荐文章于 2024-08-31 08:30:00 发布

阅读量214

点赞数

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/mylamb/article/details/133082837

版权

本文指导如何从Iconfont获取所需图标，下载到本地，将iconfont.css导入uniapp项目，配置Vue中的index.vue和app.vue以显示图标，最终实现图标在应用中的成功展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

然后下载到本地

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

iconfont.css的代码如下

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

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

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

在app.vue中写如下语句

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mylamb194

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp如何引入iconfont图标库

qq_45018844的博客

10-14

2256

第一步：你得拥有一个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小程序支持多色图标icon：iconfont-tools-cli

meteorites的博客

01-20

3165

让uniapp小程序支持多色图标icon：iconfont-tools-cli，yarn安装，配置，项目正常启动或打包直接执行编译；无需单独下载iconfont-tools项目本地执行处理

1 条评论您还未登录，请先登录后发表或查看评论

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.页面中引用在需要插入的页面引用  或者class直接引用

uni-app使用小图标的方式

阿小绿的博客

04-15

7014

1.首先我们需要去这里 2.把你需要的小图标加入到购物车 3.点击购物车把小图标【添加至项目】 4.最后下载到本地【解压放到项目中去】 5.如下： 6.在main.js里面引入 import './style/iconfont.css' 7.最后就是在页面中直接通过样式类名使用 <text class="iconfont icon-saoyisao"></text>......

uniapp引入iconfont

小白白的博客

07-04

652

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

2205

uniapp中引入iconfont

UniaApp引入Iconfont

最新发布

weixin_41562028的博客

08-31

742

官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。

如何在uniapp项目引入阿里图标库的iconfont(线上)

it_laowu的博客

05-11

3008

小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的

uniapp搭建小程序项目并使用iconfont图标库

weixin_42342008的博客

11-10

685

uniapp小程序使用iconfont图标库

UNIAPP小程序使用ICONFONT彩色图标

Fairy_Yss的博客

11-27

457

UNIAPP小程序使用ICONFONT彩色图标标签：微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹进入文件夹,将其中的iconfont-weapp-icon

uniapp常用图标.zip

01-15

图标图标

uniapp引入本地iconfont

王延朕的博客

12-06

1425

2.我们可以用的是 iconfont.css, 我们将 iconfont.css 拷贝至项目的 src/static/font/iconfont.css。1.iconfont官网下载相应代码（

uni-app 使用 iconfont

u012746918的博客

03-08

1782

根据官网小于 40kb 的字体文件可以直接本地引用。　　方法如下：　　　　首先下载字体文件。　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。　　　　放入到 static 下。　　　　修改 iconfont.css 文件，如下　　　　　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。　　　　然后，引入样式文件：　　　　　　　最后，就可以在项目中使用了。　　　　

UNI-APP引入iconfont的方法

qq_24537119的博客

03-05

1618

在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去，选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码在app.vue中引入CSS文件使用的时候也很简单可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.

uniapp 引入iconfont的方法

Gblfy_Blog

06-28

3172

uniapp 引入iconfont的方法

uniapp引用iconfont图标

weixin_30770495的博客

08-09

4447

不得不说uniapp引入iconfont确实比较坑。下面方法可行：引入方法： 1.在confont官网找好图标，然后点击复制代码， 2.点击红圈的复制代码后在网页打开，出现如下： 3.然后再uniapp项目下新建common文件夹,common文件夹下新建iconfont.css。把2步打开的代码复制到iconfont.css。记住要将iconfont.css文...

uniapp中在线引入并使用iconfon图标

LELELE__LE的博客

03-18

818

本篇文章主要介绍如果一次简单快速成功在uniapp小程序引入iconfont图标，按照步骤来，保证你一次成功！！！！

uniapp中如何引入iconfont图标

senyuyin的博客

07-28

454

【代码】uniapp中如何引入iconfont图标。

【小程序开发】uniapp引入iconfont图标及使用方式