如何在 laravel 项目中的 VueJS 上使用 Font Awesome 5
Posted
技术标签:
【中文标题】如何在 laravel 项目中的 VueJS 上使用 Font Awesome 5【英文标题】:How to use Font Awesome 5 on VueJS in laravel project 【发布时间】:2021-12-10 19:07:23 【问题描述】:我正在尝试在 Vue + laravel 项目中使用 Font Awesome。
我的package.json
有它
"devDependencies":
"@fortawesome/fontawesome-free": "^5.15.4",
"axios": "^0.21.4",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.34",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.3.11",
"resolve-url-loader": "^3.1.4",
"sass": "^1.43.3",
"sass-loader": "^11.0.1",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
,
在main.js
导入FontAwesome
import library from '@fortawesome/fontawesome-svg-core'
import faSpinner from '@fortawesome/free-solid-svg-icons'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
我在使用:
<i class="fas fa-ellipsis-v"></i>
但不显示图标!!
【问题讨论】:
【参考方案1】:阅读文档 https://github.com/FortAwesome/vue-fontawesome
你需要添加到 main.js
Vue.component('font-awesome-icon', FontAwesomeIcon)
并使用标签<font-awesome-icon icon="***" />
例子:
<font-awesome-icon icon="ellipsis-v" />
【讨论】:
以上是关于如何在 laravel 项目中的 VueJS 上使用 Font Awesome 5的主要内容,如果未能解决你的问题,请参考以下文章
如何忽略tinymce中的html标签| Vuejs 和 Laravel
在 laravel+vuejs 项目中允许 X-CSRF-TOKEN 吗?
如何在 Laravel 中的某些页面上初始化 Vuejs + VueRouter