1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【必須】Font Awesomeを使ってアイコンを挿入しよう!!

Last updated at Posted at 2021-09-05

#はじめに
Font Awesomeを使って自作のHPやアプリにアイコンを挿入することで画面が格段に良くなるので、どんどん使っていきましょう。

#Font Awesomeの使い方

  1. 公式サイトにログインして、以下のコードをコピーし、HTMLのheadタグ内に貼り付けます。
     ①右上の人のマークをクリックして、Font Awesome CDNをクリックすると、以下のコードがあります。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

②右上の人のマークをクリックして、Kitsをクリックすると、「Your Kits」の下に、アイコンとKit名(数字とアルファベットの組み合わせ)が書いてある部分があるので、そこをクリックします、
すると、以下のコードがでてきます。

<script src="https://kit.fontawesome.com/0722d56e11.js" crossorigin="anonymous"></script>

※コードが書いてある場所はサイトの仕様によって変わるかもしれないので、変わっていたら自分で探してみてください。

2)サーチボックス(Search icons...と書いているところ)に必要なアイコンが表示されそうなキーワードを英語で入力しする。

3)検索結果が出たら、好きなアイコンをクリックする(濃く表示されているアイコンが無料のものです)。

4)アイコンの名前の下あたりにあるiタグの部分をクリックして、コピーする。

5)HTML内のアイコンを表示したい部分に先ほどのiタグを貼り付ける。
※私は現在Laravelで開発中のため、以下のindex.blade.phpに貼り付けています。

index.blade.php
<a href="{{route('menu.create')}}"><i class="fas fa-magic pr-1"></i>新規登録</a>

#おわりに
使い方も簡単だし、アイコンを文字と同じように扱えるので、とても便利ですね。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?