FontAwesome - Use FontAwesome with bower

February 17, 2016

當我們透過 Bower 來使用 FontAwesome。

{% img /images/posts/FontAwesomeWithBower/1.png %}

下載下來的 FontAwesome CSS 內會用相對路徑指定所要使用的 Font 位置，但這樣在載入 CSS 時會指不到正確的 Font。

...
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype') , url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff') , url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype') , url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg') ;
  font-weight: normal;
  font-style: normal;
}
...

{% img /images/posts/FontAwesomeWithBower/2.png %}

當然我們可以透過 Grunt、Gupl 之類的自動化工具將路徑改掉，但這樣的做法感覺並不是很好，因此這邊筆者是使用自己的 CSS 將 Font 的位置改掉。

...
@font-face {
  font-family: 'FontAwesome';
  src: url('/wwwroot/lib/fontawesome/fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('/wwwroot/lib/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype') , url('/wwwroot/lib/fontawesome/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('/wwwroot/lib/fontawesome/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('/wwwroot/lib/fontawesome/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('/wwwroot/lib/fontawesome/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg') ;
}
...

{% img /images/posts/FontAwesomeWithBower/3.png %}

這樣改完後 FontAwesome 就可以正常使用。

FontAwesome