Как использовать иконки Font Awesome 5 в пользовательском интерфейсе Element - PullRequest
Новая
       36

Как использовать иконки Font Awesome 5 в пользовательском интерфейсе Element

0 голосов
/ 10 февраля 2019

Я использовал Element-UI в течение нескольких дней в одном из своих проектов Vue, и сегодня я понял, что коллекции иконок, предлагаемой фреймворком, очень не хватает.Я искал способ добавить 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');

main.scss 

[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;

1 Ответ

0 голосов
/ 07 марта 2019

В вашем случае похоже, что имя шрифта неверное.Вместо этого попробуйте Font Awesome 5 Free.

На данный момент документация не очень ясна по этому вопросу, поэтому вот метод, который я использую.Обратите внимание, что импортируемые файлы зависят от того, используете ли вы Font Awesome 5 Free или Pro.

В этих примерах импортируются все доступные шрифты, поэтому обязательно закомментируйте, что вы не собираетесь использовать.

Font Awesome 5 Free

Добавьте следующий 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/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;
}

Font Awesome 5 Pro

Добавьте следующий 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;
};
...