前言
项中使用图标的时候，发现很多都是使用直接引入图片文件的方式，然后去修改css调整样式，我觉得这样不好，存在一些缺点。首先第一点，图片只能调整宽高，而且容易产生形变，其次颜色无法更改，最后涉及一些动画，更是没有办法。所以我推荐有以上问题的同学们，可以尝试使用这个图标库。
使用
使用vue和react开发，官方都有现成的组件，直接使用即可，以下是vue2免费版的使用。
安装依赖
- 核心包：
npm i --save @fortawesome/fontawesome-svg-core - 图标样式包：
npm i --save @fortawesome/free-solid-svg-icons - 官方组件:
npm i --save @fortawesome/vue-fontawesome@latest-2
使用的依赖都是当前最新的版本
免费的图标样式包有如下三款。
设置
设置相关的工作我是使用自定义插件的方式，在main.js文件引入后使用即可，这样可以保持入口文件的整洁。
- 定义插件：后续对图标库修改做修改，都可在此进行配置，插件路径：
src/plugins/fontAwesome.js
// 1. 引入 fontAwesome 的核心包
import { library } from '@fortawesome/fontawesome-svg-core'
// 2.引入 fontAwesome 的图标组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 3. 引入 free-solid-svg-icons 内所有的图标
import { fas } from '@fortawesome/free-solid-svg-icons'
// 4. 将图标添加到库中
library.add(fas)
export default {
install(Vue) {
// 将图标组件注册为全局组件
Vue.component('font-awesome-icon', FontAwesomeIcon)
}
}
- 使用插件：在入口文件
main.js引入插件后使用。
import Vue from 'vue'
// fontAwesome图标库自定义插件
import fontAwesomePlugin from '@/plugins/fontAwesome'
Vue.use(fontAwesomePlugin)
- 使用组件：使用Font Awesome官方提供的组件,
<template>
<div class="container">
<h1 class="title">fontAwesome图标库</h1>
<div class="body">
<!-- font-awesome-icon组件已经在定义插件的时候，全局注册了，所以不必再次引入 -->
<div class="row">
<h3 class="row-title">普通使用</h3>
<div class="row-body">
<font-awesome-icon :icon="['fas', 'house']" />
<font-awesome-icon :icon="['fas', 'magnifying-glass']" />
<font-awesome-icon :icon="['fas', 'user']" />
<font-awesome-icon :icon="['fas', 'check']" />
<font-awesome-icon :icon="['fas', 'download']" />
</div>
</div>
<div class="row">
<h3 class="row-title">设置大小</h3>
<div class="row-body">
<font-awesome-icon :icon="['fas', 'house']" size="xs" />
<font-awesome-icon :icon="['fas', 'magnifying-glass']" size="lg" />
<font-awesome-icon :icon="['fas', 'user']" size="2x" />
<font-awesome-icon :icon="['fas', 'check']" size="3x" />
<font-awesome-icon :icon="['fas', 'download']" size="4x" />
</div>
</div>
<div class="row">
<h3 class="row-title">旋转与翻转</h3>
<div class="row-body">
<font-awesome-icon :icon="['fas', 'house']" rotation="90" />
<font-awesome-icon :icon="['fas', 'magnifying-glass']" rotation="180" />
<font-awesome-icon :icon="['fas', 'user']" flip="horizontal" />
<font-awesome-icon :icon="['fas', 'check']" flip="vertical" />
<font-awesome-icon :icon="['fas', 'download']" flip="both" />
</div>
</div>
<div class="row">
<h3 class="row-title">动画</h3>
<div class="row-body">
<font-awesome-icon :icon="['fas', 'house']" beat />
<font-awesome-icon :icon="['fas', 'magnifying-glass']" beat-fade />
<font-awesome-icon :icon="['fas', 'user']" bounce />
<font-awesome-icon :icon="['fas', 'check']" fade />
<font-awesome-icon :icon="['fas', 'download']" flip />
<font-awesome-icon :icon="['fas', 'phone']" shake />
<font-awesome-icon :icon="['fas', 'heart']" spin />
<font-awesome-icon :icon="['fas', 'heart']" spin-pulse />
</div>
</div>
<div class="row">
<h3 class="row-title">边框、颜色</h3>
<div class="row-body">
<font-awesome-icon :icon="['fas', 'house']" border />
<font-awesome-icon :icon="['fas', 'magnifying-glass']" style="border: 1px solid #f00; padding: 5px;" />
<font-awesome-icon :icon="['fas', 'user']" style="color: red" />
<font-awesome-icon :icon="['fas', 'check']" style="color: blue;" />
<font-awesome-icon :icon="['fas', 'download']" color="green"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.container {
width: 60%;
margin: 0 auto;
.title {
text-align: center;
}
.row {
margin-bottom: 30px;
.row-title {
text-align: center;
margin-bottom: 10px;
font-weight: 300;
}
.row-body {
display: flex;
justify-content: space-between;
}
}
}
</style>
效果展示
按照以上操作，就可以愉快的使用图标了。
