项目新添加iconfont图标

在iconfont添加你想要的图标到购物车

2.下载至本地

3. 打开下好的文件夹里面找到iconfont.css和iconfont.js文件分别将以下标红内容复制到原有项目的iconfont.css和iconfont.js文件内,就可以使用了
iconfont.js 里的函数过长就不截图展示了，全部内容复制过去就是了
iconfont.css里复制以下内容

4.这里注明一下iconfont彩色图标使用
与普通图标使用的新增步骤：
在main.js应该导文件

import './assets/icon/iconfont.js'

在结构中应该按照以下使用

   <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhuroufu" /></svg>

同时添加以下样式

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}

项目新添加iconfont图标相关推荐

vue项目引入彩色iconfont图标
做项目的时候经常会使用到iconfont图标库,在项目开始的时候提前想好需要什么图标,最好是多下载几个可替换的同类型图标,宁滥勿缺(别问,问就是得到了教训),无色的还是彩色的,这点很重要. 首先了解一 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
angular 使用ng-zorro添加iconfont图标
angular 使用ng-zorro添加iconfont图标在本文章我使用的是symbol的方式,你也可以使用fontClass或者unicode方式,但据官方原话来说,symbol是以后的主流方 ...
如何添加Iconfont图标到项目及创建新项目？
1.搜索图标或者选择自己上传图标. 2. 选择图标,加入库. 3.点击购物车图标,如果已经创建项目直接选择点击确定:如果没有创建项目点击+创建项目. 4.输入新项目名称,点击确定. 5. 确定后进 ...
添加新的iconfont图标的方法（看了就会）
一.用Unicode引入新iconfont图标 Unicode方法引入只需要保留下载的.tff.woff.woff2等字体文件,其他文件都是无关的 1.将阿里给的@font-face{-}复制到你项目 ...
在项目中使用iconfont图标(在线使用)
1.进入到阿里巴巴矢量图官网(https://www.iconfont.cn)搜索你想要的图标并加入项目中,如下图我的项目,项目名highway,已经添加了三个图标. 2.点击Font class 复 ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
iconfont怎么添加新的字体图标？
因为项目新增功能需要加入新的iconfont图标,然而因为不知道原先所有iconfont文件所在项目不能整体重新下载,只好单独添加新的图标. 具体步骤见截图. 1----在iconfont官网找到对应 ...

项目新添加iconfont图标

项目新添加iconfont图标相关推荐

最新文章

热门文章