Как добавить шрифт Awesome в Vue и Nuxt.js проект?

#vue.js #nuxtjs

Вопрос:

Я пытался добавить следующее..

css: [ ‘@/активы/front_end/fontawesome-бесплатно-5.15.3-web/css/fontawesome.css’ ],

Но это отображается как изображение, подобное

1. Как вы используете его в компоненте?

2. Вы пробовали что-нибудь подобное css: [ { src: '~/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css', lang: 'css' } ] ?

3. Да, используя его в компоненте, но не работает, также не работает и по-вашему.

Ответ №1:

вы можете импортировать css из cdn/local в свой компонент / макет

 <style scoped>
@import 'https://pro.fontawesome.com/releases/v5.10.0/css/all.css';
// or 
@import '@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css';
</style>

или ты в тебе nuxt.config.js (документация)

 export default {
  css: [
    '~/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css'
  ]
}

я бы посоветовал использовать @fortawesome/vue-fontawesome, чтобы вы могли воспользоваться встряхиванием дерева

1. Это не работает для меня с вашим предоставленным способом. и почему я использую vue-fontawsome? Я нашел nuxtjs/fontawesome здесь, как я могу использовать nuxtjs/fontawsome?

2. вам нужно быть более конкретным not working , пока не ясно. что касается nuxtjs/fontawesome этого отдельного вопроса, вы должны обратиться к документации по пакету

3. Уважаемый сэр, Не работает означает, что я попробовал fontawsome обоими способами по отдельности импортировать в компонентный стиль и nuxt.config.js но та же проблема проявляется.

4. проверьте эту песочницу, я импортировал css в тег стиля, а затем добавил i элемент и работает просто отлично codesandbox.io/s/boring-stallman-k0w4d

5. если вы импортируете файл css локально, проверьте, загружен ли шрифт ( с помощью инструментов разработчика в вашем браузере), перейдите на вкладку сеть и найдите шрифт fontawesome

Ответ №2:

Сначала добавьте зависимость в свой проект с помощью npm

 npm i @nuxtjs/fontawesome

или если вы используете пряжу

 yarn add @nuxtjs/fontawesome

затем добавьте это в свой nuxt.config.js файл в разделе buildModules

 buildModules:['@nuxtjs/fontawesome']

Далее в файле nuxt.config добавьте опцию для настройки fontawesome. Укажите значки, которые вы хотите использовать. В моем случае я обычно добавляю их ниже

 fontawesome: {
 icons:{
  solid:true,
  brands:true
 }
}

и теперь вы готовы использовать свои значки в любом компоненте nuxt или на странице
используйте его вот так

 <font-awesome-icon :icon="['fas', 'home']"/>

Это все.