vue 引入 icon(阿里图标库)

项目中，需要引入一些SVG图标，我一般都是用阿里图标库（https://www.iconfont.cn/），网上有三种步骤，我的也是其中一种，接下来记录一下，我自己用的步骤：
第一步：在阿里图标库找到自己需要的图标，鼠标放到图标上，加入购物车。
第二步：点击购物车。

第三步：点击购物车，点击添加至项目。

第四步：选择项目。

第六步：把项目下载到本地。

第七步：把压缩包里的文件复制到项目里，我是复制到了src/assets文件夹下。

第八步：全局引用css, 在main.js文件里面引用：import ‘./assets/icon/iconfont.css’
第九步：哪里需要，就在那里引用，在这里class必须加上iconfont,如果不加就会是一个小方块，需要查询图标的class值，可以在压缩包里的html文件demo_index里面寻找。

 <i class="iconfont icon-riqiqishu" style="font-size:15px; color:#ff0000; vertical-align: middle; margin-right:8px;"></i>

其他：
1.查看我的项目，在资源管理里面。

1.修改图标的大小，颜色。在项目中点击修改按钮（如下图）：

弹出次弹窗，就可以修改class,修改大小、位置等

vue 引入 icon(阿里图标库)相关推荐

Vue 使用阿里图标库代替element icon
一.创建阿里图标库项目打开网址:https://www.iconfont.cn/ ,找到[我的项目] 点击右侧文件夹[创建项目] 填写[项目名称],[FontClass]前缀填好后,后续使用icon ...
flutter显示图标_flutter 引入第三方 Icon 图标（以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...

vue 引入 icon(阿里图标库)

vue 引入 icon(阿里图标库)相关推荐

最新文章

热门文章