Font Awesomeを使うと、アイコンをWebフォントで使用することができます。
メリット：アイコン画像のスライスがいらない
使い方 Webフォントで読み込む
SVGとして読み込む
アイコンを探す
https://fontawesome.com/icons?d=gallery
HTMLに記述する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fontawesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> </head> <body> <i class="fab fa-twitter"></i> </body> </html> |
アイコンの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- ＝＝＝＝＝＝＝ サイズ ＝＝＝＝＝＝＝＝＝＝--> <!--fa-lg：1.33倍--> <i class="fas fa-twitter fa-lg"></i> <i class="fas fa-twitter fa-2"></i> <i class="fas fa-twitter fa-3"></i> <i class="fas fa-twitter fa-4"></i> <i class="fas fa-twitter fa-5"></i> <!-- ＝＝＝＝＝＝＝ アイコン幅の統一 ＝＝＝＝＝＝＝＝＝＝--> <i class="fas fa-twitter fa-fw" ></i> <!-- ＝＝＝＝＝＝＝ 回転させる ＝＝＝＝＝＝＝＝＝＝--> <i class="fas fa-twitter fa-spin"></i> <!-- ＝＝＝＝＝＝＝ 表示角度の変更 ＝＝＝＝＝＝＝＝＝＝--> <i class="fas fa-twitter fa-rotate-90"></i> <i class="fas fa-twitter fa-rotate-180"></i> <i class="fas fa-twitter fa-rotate-270"></i> <!-- ＝＝＝＝＝＝＝ 枠をつける ＝＝＝＝＝＝＝＝＝＝--> <i class="fas fa-twitter fa-border"></i> |
背景画像として使用する方法
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- HTML --> <span class="test-icon">アイコン</span> <!-- CSS --> .test-icon:before { font-family: "Font Awesome 5 Free"; content: '\f099'; font-weight: 900; } //font-weight: 900;//Solid //font-weight: 400;//Regular |