質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

2回答

4698閲覧

Vue CLIの中でfont awesomeを使いたいのですが、fabが反映されません・・・

MASAMI-O

総合スコア15

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

1グッド

1クリップ

投稿2019/04/24 12:54

編集2019/04/24 13:30

イメージ説明
Vue CLIの中で、fontawesomeを使いたいのですが、fab(tiwtterやfacebook)が反映されずにいます。
他のiconは反映されているので、font awesome自体は読み込めていると思うのですが、どこが悪いのかがわからずにいます。
皆様お力添えをお願い致します・・・
参考記事:https://qiita.com/kurararara/items/d76776a7dc2d763a068b

下記がcomoonents下に作ったファイル(Header.vue)になります。

Vue

1<template> 2 <div id="headerMenu"> 3 <div class="fa-stack fa-3x"> 4 <font-awesome-icon icon="circle" class="fa-stack-2x"/> 5 <font-awesome-icon icon="bars" class="fa-stack-1x" /> 6 </div> 7 <div class="fa-stack fa-3x"> 8 <font-awesome-icon icon="circle" class="fa-stack-2x"/> 9 <font-awesome-icon icon="facebook-f" class="fa-stack-1x" /> 10 </div> 11 <div class="fa-stack fa-3x"> 12 <font-awesome-icon icon="circle" class="fa-stack-2x"/> 13 <font-awesome-icon icon="twitter" class="fa-stack-1x" /> 14 </div> 15 <div class="fa-stack fa-3x"> 16 <font-awesome-icon icon="circle" class="fa-stack-2x"/> 17 <font-awesome-icon icon="instagram" class="fa-stack-1x" /> 18 </div> 19 <div class="fa-stack fa-3x"> 20 <font-awesome-icon icon="circle" class="fa-stack-2x"/> 21 <font-awesome-icon icon="youtube" class="fa-stack-1x" /> 22 </div> 23 <div class="fa-stack fa-3x"> 24 <font-awesome-icon icon="circle" class="fa-stack-2x"/> 25 <font-awesome-icon icon="envelope" class="fa-stack-1x" /> 26 </div> 27 </div> 28</template> 29<script> 30export default { 31 name: 'Header', 32 components: { 33 }, 34 data () { 35 return { 36 // 37 } 38 } 39} 40</script>

下記がApp.vueになります。

Vue

1<template> 2 <div id="app"> 3 <Header /> 4 </div> 5</template> 6<script> 7import Header from './components/Header.vue' 8export default { 9 name: 'App', 10 components: { 11 Header, 12 } 13 } 14} 15</script> 16<style> 17 @import './style/common.css'; 18 19</style>

下記がmain.jsになります。

JavaScript

1import Vue from 'vue' 2import App from './App.vue' 3 4import { library } from '@fortawesome/fontawesome-svg-core' 5import { fas } from '@fortawesome/free-solid-svg-icons' 6import { far } from '@fortawesome/free-regular-svg-icons' 7import { fab } from '@fortawesome/free-brands-svg-icons' 8import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 9 10library.add(fas, far, fab) 11Vue.component('font-awesome-icon', FontAwesomeIcon) 12 13Vue.config.productionTip = false 14 15import Router from './router.js' 16 17new Vue({ 18 Router, 19 render: h => h(App), 20}).$mount('#app')

下記がcommon.cssになります。

CSS

1.fa-3x{ 2 display:flex; 3 flex-direction: column; 4} 5 6.fa-stack-2x{ 7 color: rgb(63,150,80); 8} 9 10.fa-stack-1x{ 11 color:#ffffff; 12}

この結果が最初の画像です。

barsなど企業のロゴじゃないiconは読み込まれているのに、
Twitter,Facebook,instagram,youtubeのiconは読み込まれていません・・・

こちらの原因に関して、お伺いできれば幸いです。
何卒よろしくお願い致します。

TanakashiXr👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

デフォルトの prefix は fas なので、それ以外の prefix の場合は明示する必要があります。
The icon property

html

1<font-awesome-icon :icon="['fab', 'twitter']" />

投稿2019/04/24 15:48

wtokuno

総合スコア448

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MASAMI-O

2019/04/24 16:55

wotokuno様  できました!! ありがとうございます!!
guest

0

1: こちらを参考にされるとよいかもしれません

Icons - Vuetify

2: タイポが気になります

@fortawesome

投稿2019/04/24 13:18

編集2019/04/24 13:22
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MASAMI-O

2019/04/24 16:55

ppn様 回答頂きありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問