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は読み込まれていません・・・
こちらの原因に関して、お伺いできれば幸いです。
何卒よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/24 16:55