全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面

Iconfont阿里巴巴矢量库的使用

阿里巴巴矢量库

使用步骤：

(因为阿里矢量图库类似一个商场一样的设计，需要我们登录，把想要的图标放进我们的购物车中，步骤可能有些繁琐)

先看一下gif图吧，如果看懂了略过步骤①，②，③ 直接看步骤④怎么引入即可

进入网站之后，搜索想要的icon图标；
选择所需要的所有icon添加入库，可以点击上方的库存，将所有icon添加到某个项目；
在我的项目中，选择刚刚添加的项目，然后点击fontClass即可；
引入图标：将生成的CSS的链接地址引入前端样式(注意：复制的地址前要加"http:")。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_2177230_n9jezy7z4kq.css">

在页面中引用进来

<i class="iconfont icon-changqun" ></i> // 其中icon-changqun就是从阿里icon上面复制下来的代码

整体demo如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2177230_n9jezy7z4kq.css">
</head><body>
<i class="iconfont icon-changqun" ></i></body>
</html>

在页面中就有了我们无色的长裙

以上！

全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面相关推荐

vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
使用iconfont阿里巴巴矢量图标库（最方便的使用方法）
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
码神之路博客系统更换个人卡片图标（iconfont 阿里巴巴矢量图标库的使用）
目录个人卡片图标更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
阿里巴巴矢量库IconFont__使用小录
使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔阿里巴巴矢量库地址:http://www.iconfont.cn/plus 阿里巴巴矢量库图标好处: 1:图标矢量化 2:自己总结:ic ...
阿里巴巴矢量库的用法
阿里巴巴矢量库的用法: 1.将选中的图标下载到本地然后把文件解压 , 里边的文件放在自己项目的font文件夹下 2.Unicode 使用步骤如下: 第一步:拷贝项目下面生成的 @font-face ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...

全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面

Iconfont阿里巴巴矢量库的使用

使用步骤：

整体demo如下:

在页面中就有了我们无色的长裙

全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面相关推荐

最新文章

热门文章