阿里矢量图标库 - Font class 方式使用说明

目录

一、下载

二、引入

方式一

方式二

方式三

三、使用

效果 1

效果 2

效果 3

效果 4

效果 5

效果 6

效果 7

四、iconfont 冲突

---

一、下载

官网：iconfont-阿里巴巴矢量图标库

1、先登录，将所需图标添加到购物车。

2、选择“下载代码”。

3、解压后的文件目录。

4、这是我选的图标。

二、引入

在vue项目中使用，这是我的目录结构：

方式一

全局引入，在 index.html 文件中，使用 link 标签

<link rel="stylesheet" href="font/iconfont.css">

方式二

全局引入，在 main.js 文件中，使用 import

import '../public/font/iconfont.css'

方式三

局部引入，在单个 vue 文件的 <style> 标签中，使用 import。注意有 @ 和 ~。

@import '~../../public/font/iconfont.css';

三、使用

• 建议使用 span 标签，class 中必须引入 iconfont；
• 默认是黑色，可使用 color 修改；
• 默认大小是 16px，可使用 font-size 修改；

效果 1

引入 class='icon-bianji' 的图标， 使用默认样式。

<span class="iconfont icon-bianji"></span>

效果 2

引入 class='icon-pinglun' 的图标，自定义 class='icon-red' 设置图标为红色。

<span class="iconfont icon-pinglun icon-red"></span>

.icon-red {
    color: red;
}

效果 3

引入 class='icon-wode' 的图标，自定义 class='icon-blue' 设置图标为蓝色，大小为 32px。

<span class="iconfont icon-wode icon-blue"></span>

.icon-blue {
    font-size: 32px;
    color: rgb(0, 110, 204);
}

 

效果 4

引入 class='icon-wode' 的图标，自定义 class='icon-blue-opacity' 设置图标为蓝色半透明，大小为 32px。

<span class="iconfont icon-wode icon-blue-opacity"></span>

.icon-blue-opacity {
    font-size: 32px;
    color: rgba(0, 110, 204, 0.5);    
}

效果 5

引入 class='icon-wode' 的图标，自定义 class='icon-blue-shadow' 设置图标为蓝色有阴影，大小为 32px。

<span class="iconfont icon-wode icon-blue-shadow"></span>

.icon-blue-shadow {
    font-size: 32px;
    color: rgb(0, 110, 204);
    text-shadow: rgb(0, 110, 204) 2px 2px 5px;
}

 

效果 6

引入 class='icon-wode' 的图标，自定义 class='icon-blue' 设置图标为蓝色，大小为 32px。

注意要在外面包一层才能旋转，对图标设置旋转无效。

<div class="icon-transform" >
    <span class="iconfont icon-wode icon-blue"></span>
</div>

.icon-transform {
    display: inline-block;
    transform: rotate(-30deg);
}
.icon-blue {
    font-size: 32px;
    color: rgb(0, 110, 204);
}

效果 7

引入 class='icon-wode' 的图标，自定义 class='icon-blue' 设置图标为蓝色，大小为 32px，hover 时改为绿色。

<span class="iconfont icon-wode icon-blue"></span>

.icon-blue {
    font-size: 32px;
    color: rgb(0, 110, 204);
}
.icon-blue:hover {
    color: green;
}

四、iconfont 冲突

当引入多个 iconfont 图标库时，会存在重复定义。或你想对 iconfont 做一些专属效果。修改方式如下：

找到 iconfont.css 文件，将 .iconfont 改为 my-iconfont 即可（也可以是其它命名）。

使用

<span class="my-iconfont icon-bianji"></span>