Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,不用设计师,我们可以直接在Font Awesome中找到并且使用。
1.安装
#核心依赖
npm install --save @fortawesome/fontawesome-svg-core
#兼容vue的组件
npm install --save @fortawesome/vue-fontawesome
#awesome的solid风格图标
npm install --save @fortawesome/free-solid-svg-icons
#awesome的商标图标(可选)
npm install --save @fortawesome/free-brands-svg-icons
2.配置(main.js)
...
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
...
Vue.component('font-awesome-icon', FontAwesomeIcon);
...
我们已经引入了Font Awesome的主要内容,并注册了Font Awesome组件,但是我们还没有引入任何一个图标,让我们先去Font Awesome官网找一下我们需要的图标。
...
// 引入需要的图标
import {
faUser,
} from '@fortawesome/free-solid-svg-icons';
import {
faWeixin,
} from '@fortawesome/free-brands-svg-icons';
...
//添加到库中
library.add(
faUser,
faWeixin
)
3.使用
<font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
<font-awesome-icon :icon="['fab', 'weixin']"></font-awesome-icon>
其中font-awesome-icon是我们刚刚注册好的组件名,:icon属性是一个数组,用来指定具体图标,刚刚的class中有两个属性,分别是fas和fa-user,第一个fas保留(代表时那个库的),第二个fa-user去掉开头的fa-保留剩下的,作为数组的两个元素,就可以正确指定我们要的图标了。
4.个性化
渲染出来实际上这是一个<svg>标签,我们可以把它包裹在其他HTML标签中,给这个图标设置大小和颜色,例如:
<template>
<div id="app">
<span class="my-icon">
<font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
</span>
</div>
</template>
<script>
export default {
name: 'app',
};
</script>
<style>
.my-icon {
color: red;
background-color: blue;
font-size: 32px;
}
</style>