目录

一、下载

二、引入

方式一

方式二

方式三

三、使用

效果 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>

Logo

前往低代码交流专区

更多推荐