Font Awesome 介绍
Font Awesome 是互联网的图标库和工具包,被数百万设计师、开发人员和内容创建者使用。
Font Awesome的图标非常丰富,基本涵盖你所需要的所有,所以我推荐在你的前端项目中使用它!并且它在使用上是方便的,快速的。Font Awesome同样支持vue2!
安装Font Awesome
通过npm安装
1.添加SVG核心
首先,您需要使用 npm 或 yarn 来安装核心包,其中包括使图标工作的所有实用程序:
npm i --save @fortawesome/fontawesome-svg-core
2. 添加图标包
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
上面的每个依赖都是免费的,任选其一即可,或者安装全部
当然你也可以通过用户自定义套件安装你想要的不同类型的图标,前提是确保你已经在自己的套件中添加好了需要的图标:
npm i --save @fortawesome/kit-KIT_CODE@latest
3. 添加 Vue 组件
最后,安装 Font Awesome Vue 组件,vue3运行下面命令:
npm i --save @fortawesome/vue-fontawesome@latest-3
vue2:
npm i --save @fortawesome/vue-fontawesome@latest-2
依赖导入
项目的main.js(或ts):
import App from './App.vue'
// 引入font awesome图标
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faGear,faBars,faSun } from '@fortawesome/free-solid-svg-icons'
// 局部引入图标
/* add icons to the library */
library.add(faGear,faBars,faSun)
const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')
导入成功以后就可以在项目中使用:
<font-awesome-icon icon="fa-solid fa-gear" />
可能遇到的问题
由于上面的导入方式在导入时的要注意命名,导入时名称格式为小写fa加标签名首字母大写,如:
要导入fa-user图标,正确的名称为faUser,然后直接复制图标提供的代码片段,这里推荐字符串格式。