CSS:运用阿里巴巴矢量库快速在对应位置加上好看的图标

进入阿里巴巴矢量图标库

阿里巴巴矢量图标库

选择喜欢的图标的，点击添加到库
选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）
然后在右侧中点击添加至项目
之后在个人主页中可以看见
1.Unicode
2.Font class
此次便是对于这两个的使用

Unicode

开始进入时，会自动生成代码，如果没有，则点击生成
例:

@font-face {font-family: 'iconfont';  /* project id 1743720 */src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
}

其中最最关键的是iconfont
同时，我们还需要修改其对应的url路径
以第一个举例

<!--原来的url-->
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!--修改后的的url,打开浏览器之后访问一下对应的url，提示下载eot文件则修改成功-->
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');

Unicode中对于图标的引用如下

在刚刚的个人页面中，选中Unicode可以看见加入的图标都在下面,以搜索举例
鼠标滑上去以后可以看见复制代码的图标，点击复制

以下为实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图标使用</title><style>@font-face {font-family: 'iconfont';  /* project id 1743720 */src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');}.wrapper {width: 1090px;height: 300px;background-color: antiquewhite;margin: 0px auto;text-align: center;}.iconTest::before {/*此处为复制来的图标代码，修改为以下形式*//* content: "&#xe61a;"; */content: "\e61a";font-family: "iconfont";}</style>
</head>
<body><div class="container"><div class="wrapper"><span class="iconTest"> : Hello CSS</span></div></div>
</body>
</html>

效果图
### Font Class中对于图标的引用
这个就要简便很多了
在图标库个人主页的Unicode旁边就是Fonte Class点击，再任选一个图标，复制代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图标使用</title><!--以引入css资源的方式使用，url同样修改一下，加入https://--><link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css"><style>.wrapper {width: 1090px;height: 300px;background-color: antiquewhite;margin: 0px auto;text-align: center;}</style>
</head>
<body><div class="container"><div class="wrapper"><!--iconfont表示这个是一个图标样式--><!--icon-sousuot表示这个是图标中的搜索--><span class="iconfont icon-sousuo"></span><span> : Hello CSS</span></div></div>
</body>
</html>

更加简便的使用

有时候，一个复杂的网页包含各种图标的引用，例如导航栏每个栏目的前面都要一个图标，这个便用到了了::before,而同样后面有时候又要用span来引用图标，这时，我们便可以引入Font-Class中的使用方法却达到了两种场景的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图标使用</title><link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css"><style>.wrapper {width: 1090px;height: 300px;background-color: antiquewhite;margin: 0px auto;text-align: center;}.iconTest::after {content: "\e61a";font-family: "iconfont";}</style>
</head>
<body><div class="container"><div class="wrapper"><span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hello CSS</span></div></div>
</body>
</html>

效果便是Hello CSS前后都有搜索图标

原因：打开引入的css我们可以发现其中也包含了Unicode，因此之后的使用只需要引入Font-Class即可，而图标对应的十六进制编码在Unicode中复制，也算是一个小技巧。

CSS:运用阿里巴巴矢量库快速在对应位置加上好看的图标相关推荐

阿里巴巴矢量库的用法
阿里巴巴矢量库的用法: 1.将选中的图标下载到本地然后把文件解压 , 里边的文件放在自己项目的font文件夹下 2.Unicode 使用步骤如下: 第一步:拷贝项目下面生成的 @font-face ...
阿里巴巴矢量库IconFont__使用小录
使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔阿里巴巴矢量库地址:http://www.iconfont.cn/plus 阿里巴巴矢量库图标好处: 1:图标矢量化 2:自己总结:ic ...
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
微信开发工具及Hbuilder中引用阿里巴巴矢量库（步骤一样）
第一步:创建一个阿里巴巴矢量库项目,将图标加入项目中,并生成一个在线的css文件第二步:在微信开发者工具中新建一个.wxss文件,把第一步中的复制好的代码粘贴到这个文件中,如果将来有新的图标放置项目 ...
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...