vue.js - 如何在 Element UI 中使用 Font Awesome 5 图标
问题描述
我已经在我的一个 Vue 项目中使用 Element-UI 几天了,今天我意识到框架提供的图标集合非常缺乏。我寻找一种将 FontAwesome 5 添加到项目中的方法,并按照此处提供的链接和说明进行操作:Element-UI 和 Font Awesome。
不幸的是,那没有用。这些说明适用于旧版本的 Font Awesome 和 Element UI。
这是我尝试过的:
main.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueSweetalert2 from 'vue-sweetalert2';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/scss/tailwind.scss';
import axios from 'axios';
import VueAxios from 'vue-axios';
import '@/assets/scss/main.scss';
Vue.config.productionTip = false;
Vue.config.devtools = true;
Vue.use(ElementUI);
Vue.use(VueSweetalert2);
Vue.use(VueAxios, axios);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
主文件
[class^="el-icon-fa"],
[class*=" el-icon-fa"] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome !important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@import url('../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss');
@fa-css-prefix: el-icon-fa;
解决方案
在您的情况下,字体名称似乎不正确。试试Font Awesome 5 Free
吧。
到目前为止,文档对此还不是很清楚,所以这是我使用的方法。请注意,您导入的文件取决于您使用的是 Font Awesome 5 Free 还是 Pro。
这些示例导入了所有可用的字体,因此请务必注释掉您不打算使用的字体。
字体真棒5免费
将以下 SCSS 添加到您的应用程序中,例如App.vue
:
// Import Font Awesome 5 Free
$fa-css-prefix: 'el-icon-fa';
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
// Override Element UI's icon font
.fas {
font-family: 'Font Awesome 5 Free' !important;
}
.fab {
font-family: 'Font Awesome 5 Brands' !important;
}
字体真棒5临
将以下 SCSS 添加到您的应用程序中,例如App.vue
:
// Import Font Awesome 5 Pro
$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts';
$fa-css-prefix: 'el-icon-fa';
@import '~@fortawesome/fontawesome-pro/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-pro/scss/light.scss';
@import '~@fortawesome/fontawesome-pro/scss/regular.scss';
@import '~@fortawesome/fontawesome-pro/scss/solid.scss';
@import '~@fortawesome/fontawesome-pro/scss/brands.scss';
// Override Element UI's icon font
.fal,
.far,
.fas {
font-family: 'Font Awesome 5 Pro' !important;
}
.fab {
font-family: 'Font Awesome 5 Brands' !important;
}
现在您可以将它们用作图标。请注意,fas|fal|fal|fab
前缀仍然是必需的:
<i class="fas el-icon-fa-check"></i>
或其他地方:
<el-input
v-model="search"
placeholder="Type something"
prefix-icon="fas el-icon-fa-search"
>
</el-input>
如果您只使用一种字体,则可以使用一些额外的样式来消除对前缀的需求:
// Use Font Awesome icons without a prefix
[class^="el-icon-fa"],
[class*=" el-icon-fa"] {
font-family: 'Font Awesome 5 Free' !important; // Change this to 'Font Awesome 5 Pro' for pro
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: inherit;
text-rendering: auto;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
};
推荐阅读
- jira - 如何在没有括号的情况下评估 JQL 中的多个 AND 和 OR?
- java - 与未从订单列表中删除书籍和更新订单相关的订单流程问题
- python - 使用python将实时股票报价导入具有for循环的csv文件
- c# - 使用shell时如何更改iOS中状态栏的颜色
- java - 具有多种类型值的映射 java
- ruby-on-rails - heroku 无法从引导布局加载 CSS/JS
- swift - 如何检测 MKMapview 注释上的按钮按下?
- docker - 在 Docker 中使用 fluentd 日志记录驱动程序时的副作用
- google-cloud-platform - 如何在谷歌云平台创建 MariaDB 数据库?
- r - R:根据特定规则重塑数据框