fv17の日記

Webエンジニアの備忘用ブログです。主にWeb界隈の技術に関して書いています。

Bootstrap4でFont Awesomeを使う(3のGlyphiconsが使えなくなりました)

Bootstrap

Bootstrap4では、Bootstrap3で使えたGlyphiconsが使えなくなり有料化されました。代替案の一つが、Font Awesomeへの移行です。その方法を書きます

公式からリンクをGET

下記リンクを踏むと「Start Using Free」と出てくるのでクリックすると、リンクが出てきます。そのリンクをheadタグに貼り付けるだけです。CDN以外で利用する場合は、リンクがある画面で下にスクロールをするとダウンロードする方法や各言語でのインストール方法が書いてあります。
fontawesome.com

GETしたリンクをheadタグに貼り付け

<!DOCTYPE html>
<html>
  <head>
    <!-- 略 -->
    <!-- 下記のようにペースト -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  </head>
  
  <!-- 略 -->    
</html>

使いたい記号を探す

5000弱あるので、かならず見つかるはず。これ無料で使えるって凄い...
お、無料だと1500弱ですね。それでもヨイヨイ。biohazardなんかの記号もある。
https://fontawesome.com/icons?d=gallery

コーディング

下記は星を表示させる場合の例

<i class="fas fa-star"></i>