【Java】Font Awesome

★プログラミング ・Java ・レイアウト

概要

HTMLにでアイコンフォントを簡単に導入することができるサービス

使い方

方法１）ダウンロードしたファイルを使用
方法２）CDNを使用

ダウンロードしたファイルを使用

１）ファイルをダウンロードする
Font Awesome
Start for Freeを押下
f:id:vist764:20200329023131p:plain:w500
Downloadを押下
f:id:vist764:20200329031610p:plain:w500
Download Font Awesome Free for the Webを押下
f:id:vist764:20200329031921p:plain:w500
２）ファイルを配置
f:id:vist764:20200329033350p:plain:w300
３）コードを記述

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>サンプル</title>
    <link rel="stylesheet" href="../static/font-awesome/css/all.css">
  </head>
  <body>
  <i class="fab fa-amazon"></i>
  </body>
</html>

CDNを使用

１）リンクをHTMLのheadに記述

　<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

２）使いたいアイコンを検索し、コードを取得
　Font Awesome
Start Using This Iconを押下
f:id:vist764:20200329022325p:plain:w500
コードをコピー
f:id:vist764:20200329034851p:plain:w500
３）コードをHTMLに張り付け

<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>サンプル</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  </head>
  <body>
  <i class="fab fa-amazon"></i>
  </body>
</html>