阿里矢量图标及其引入方式

阿里矢量图标

是目前国内功能强大图标丰富的图标库
由阿里巴巴倾力打造
​
字体图标
​
使用步骤：
1.登录https://www.iconfont.cn/
2.挑选相对应的图标加入购物车
3.点击网址右上角的购物车，点击下载代码
4.把下载的文件解压一下，建议改一下文件名（font）
5.把解压的文件放道项目中（写代码的文件中（代码和此文件呈并列关系））
​
一般都使用Unicode 方式引用和font-class 方式引用
​

Unicode 方式引用

<!-- 第一步：引入项目下面生成的iconfont.css文件： -->
<link rel="stylesheet" href="./font/font_1v4mvgi3fzs/iconfont.css">
​
​
/* 通过字体属性改变图标 */
.box {
/* 修改字体图标的颜色 */
color: tomato;
/* 修改字体图标的大小 */
font-size: 50px;
/* 修改字体图标的加粗 */
font-weight: bold;
}
​
.iconfont {
/* color: yellow; */
}
​
<!-- 第二步 ：挑选相应图标并获取字体编码，应用于页面：-->
<!-- &#xe65e;字体编码 -->
​
<!-- 
iconfont这个类名必须加,是字体图标的公共类名
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
-->
​
<!-- 把字体编码放到标签中间 -->
<span class="iconfont box">&#xe605;</span>
<div class="iconfont">&#xe510;</div>
​
​
​
注意：代码引入方式不支持色彩
​
但是可以通过字体属性调整图标的样式
字体颜色：color
字体大小：font-size
字体加粗：font-weight
​
​
不直观
​

font-class 方式引用

​
<!-- 第一步：引入项目下面生成的iconfont.css文件： -->
<link rel="stylesheet" href="./font/font_1v4mvgi3fzs/iconfont.css">
​
/* 改变样式 */
.icon-qunzi- {
color: tomato;
font-size: 50px;
}
​
.icon-paochejiuyuan1 {
color: green;
font-size: 60px;
font-weight: bold;
}
​
<!-- font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。 -->
​
<!-- 第二步：挑选相应图标并获取类名，应用于页面： -->
<!-- iconfont这个类名必须加,是字体图标的公共类名 -->
<!--
.icon-meinv
复制的时候不要把.复制进去
​
-->
<!-- qunzi 裙子  直观 -->
<span class="iconfont icon-qunzi-"></span>
<!-- wanghongshuaige -->
<span class="iconfont icon-wanghongshuaige"></span>
<span class="iconfont icon-meinv"></span>
​
<div class="iconfont icon-paochejiuyuan1"></div>
​
<p class="iconfont icon-056-girl-1"></p>
​
​
<!-- i em 标签没有在浏览器中显示斜体，因为字体图标的iconfont样式中有：    font-style: normal;字体样式正常 -->
<em class="iconfont icon-paoche"></em>
<i class="iconfont icon-paoche"></i>
​
<!-- 多个类名中间用空格隔开 -->
​

Symbol方式引用

​
<!-- 第一步：引入项目下面生成的/iconfont.js文件： -->
<!-- js文件用script标签的src属性引入 -->
<script src="./font/font_1v4mvgi3fzs/iconfont.js"></script>
​
<!-- 第二步：加入通用 CSS 代码（引入一次就行）： -->
<style>
    .icon {
        /* em是相对单位，相对父元素的 */
        width: 1em;
        height: 1em;
        /* 垂直对齐方式 */
        vertical-align: -0.15em;
        /* 填充：当前颜色 */
        fill: currentColor;
        /* 溢出隐藏 */
        overflow: hidden;
​
​
    }
​
    /* 
    可以通过宽高来设置图标的大小
    也可以通过font-size来设置图标的大小
​
    */
​
    .icon {
        font-size: 100px;
        /* 
        width: 200px;
        height: 200px; */
​
        /* 改不了颜色 */
        /* color: tomato; */
        /* 无效 */
        font-weight: bold;
    }
​
    <!-- 第三步：挑选相应图标并获取类名，应用于页面： -->
    <!--
    <use xlink:href="#icon-xxx"></use>
    把xxx换成挑选的类名即可
    -->
​
​
    <!-- #icon-meinv -->
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-meinv"></use>
    </svg>
    
    <!-- #icon-056-girl-1 -->
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-056-girl-1"></use>
    </svg>
    
    <!-- #icon-wanghongshuaige -->
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-wanghongshuaige"></use>
    </svg>
    
    <!-- #icon-paoche-xuanzhong -->
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-paoche-xuanzhong"></use>
    </svg>
​
    <!-- 
    支持色彩
    -->
​