Vue中在线引用iconfont图标

使用iconfont网站的大体流程是不变的前端使用阿里iconfont引入字体图标_Eric加油学！的博客-CSDN博客_前端引入iconfont

首先，打开阿里iconfont图标库，搜索自己想要的图标，加入购物车

相应的图标都加入购物车以后，点击购物车，添加到相应的项目中去

然后就可以在我的项目中看到你刚才所添加的图标了

我这里采用了Font class的在线引入方式。第4步如果初使用时是没有在线链接的，需要点击生成。（后续，如果该项目中又添加了新的图标，也需要点击重新生成新的链接）

复制这串代码，到我们想要添加的Vue组件中去，比如我要添加这个搜索图标，我放置在了WebHead.vue组件中。

<div class="searchicon"><i class="iconfont icon-sousuo1"></i>
</div>

在.vue文件中，css样式里引入在线链接（记得加上http:），在template模版中，放入想要的图标，我这里用的是最右边的icon-sousuo1图标。（记得要在前面加上 iconfont）

这样就可以实现简单的在线引入iconfont图标了。

后续如果要对图标进行样式调整，可以直接在css中调整

.iconfont{font-size: 18px;color: #fff;
}

Vue中在线引用iconfont图标相关推荐

vue中在线引入iconfont字体图标
记录在线引入iconfont字体图标. 在iconfont官网上添加项目并添加完需要的图标后,在资源管理==>我的项目中生成代码,再到vue项目中app.vue组件里的style标签下引用即可. ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
在 vue 中使用 SVG 建立图标系统并且使用
首先我们先来学一下 svg 标签的基础知识,参考了阮一峰大神的网络日志,链接:http://www.ruanyifeng.com/blog/2018/08/svg.html SVG 全称是可缩放矢量图 ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
2021-11-26 vue项目中如何引入iconfont图标库
1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下 2.引入在main.js中引入import '@/a ...
uniapp引用iconfont图标
不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再unia ...

Vue中在线引用iconfont图标

Vue中在线引用iconfont图标相关推荐

最新文章

热门文章