【工作积累】Vue3使用font-awesome

前言：element官网给出的图标有限，而 fontawesome，图标多，制作精美，文档齐全，支持多种形式的引入。所以今天咱们就来看下 Vue3 项目常用的引入方式。
文档地址：
快速开始

1、下载核心包

npm i --save @fortawesome/fontawesome-svg-core

2、下载图标库

这里我是使用的svg方式的引入

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

3、下载 fontawesome 给 Vue3 准备的组件

npm i --save @fortawesome/vue-fontawesome@latest-3

4、在 main.js 中引入以及注册 fontawesome 组件

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* 引入图标库组件 */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import all icons, solid图标库的包名为fas、regular图标库的包名为far、brands图标库的包名为fab */
import { fas } from '@fortawesome/free-solid-svg-icons'
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'

/* 添加 fas 图标 在网站中的solid分类下面获取*/
library.add(fas)


app
  .component('font-awesome-icon', FontAwesomeIcon)
  .mount('#app')

上述可以看到，我引入并注册了 fas 包，这个包里面的图标都在 solid 分类下

和咱们下载的包名是对应的，如果要用另外两个库中的图标，也一起注册就行

5、在页面中使用

点进想要的图标，把 vue 栏下面的代码复制到模版中就可以使用了

6、改背景

免费的图标，背景都是黑色的，但是黑色好生硬的说，所以可以自己修改一下
先把svg复制下来

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

然后使用 fill 加一个自己喜欢的颜色就行，对了，别忘了给 svg 加一个 width 和 height 属性，要不然会看不到它的

 <svg width="16" height="16" fill="#b2b2b2" xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512">
    <path d="M128 64c0-35.3 28.7-64 64-64L352 0l0 128c0 17.7 14.3 32 32 32l128 0 0 288c0 35.3-28.7 64-64 64l-256 0c-35.3 0-64-28.7-64-64l0-112 174.1 0-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39L128 288l0-224zm0 224l0 48L24 336c-13.3 0-24-10.7-24-24s10.7-24 24-24l104 0zM512 128l-128 0L384 0 512 128z"/>
</svg>