Font Awesomeアイコンの登録方法と使い方
![Font Awesome](https://popo-design.net/wp/wp-content/uploads/2020/07/font-1024x506.jpg)
Webページにアイコンを表示できる「Font Awesome」デザイン制作によく使われるようになったアイコンですが、アカウントを登録しないと使えないようになってしまったので登録方法をまとめてみました。
Font Awesomeアカウント登録の流れ
まずは公式サイトにアクセスして、「Start for Free」をクリックします。
![公式サイトへアクセス](https://popo-design.net/wp/wp-content/uploads/2020/07/font1-1024x506.jpg)
自分のメールアドレスを入力して、「Send Kit Code」をクリック。
![メールアドレスを入力](https://popo-design.net/wp/wp-content/uploads/2020/07/font2-1024x542.jpg)
するとメールで通知が届くので、リンク先をクリック。
![リンク先をクリック](https://popo-design.net/wp/wp-content/uploads/2020/07/font3.jpg)
パスワードとユーザー名などを入力していきます。
この部分、スクリーンショットを撮り忘れてしまいました。
Font Awesomeの使い方
アカウントを作成してログインすると、javascriptのコードが表示されているので、Webサイトの<head>〜</head>タグの間に貼り付けます。
![javascriptのコードを貼り付ける](https://popo-design.net/wp/wp-content/uploads/2020/07/font4-1024x531.jpg)
次は表示させたいアイコンを検索します。この辺りは今までのバージョンと同じです。
例えばFacebookのアイコンの場合は、検索窓に「Facebook」と入力します。
![探したいアイコン名を検索](https://popo-design.net/wp/wp-content/uploads/2020/07/font5-1024x531.jpg)
<i>〜</i>までのコードをコピーして、表示させるサイトの<body>〜</body>の間に貼り付けます。
実際のサイト上に表示できていれば完成です。
![タグを表示させたい場所へ貼り付ける](https://popo-design.net/wp/wp-content/uploads/2020/07/font6-1024x533.jpg)
[公開日] 2020年7月20日 / [最終更新日] 2022年10月5日 / カテゴリー:WEBデザイン
同じカテゴリーの記事
-
エックスサーバーで常時SSL化「http→https」301リダイレクト転送設定をする方法
エックスサーバーで無料SSL(https)を取得したものの、httpのアドレスでアクセスしても表示されてしまう場合に手動 [続きを読む]
-
ブログが続かないときのネタ収集方法とコツ
お店や会社のブログを集客のために書こうと最初は意気込んでいたものの、3日とたたず続かない・・・書くことが無いし、何を書け [続きを読む]
-
HTMLとWordPressでWEBサイトを作るならどっちが良い?
今どきなぜ手書きのHTML・CSSでホームページを作るのか? 現在はホームページを作るための専用のタグを覚えなくても、簡 [続きを読む]
-
スマホで簡単撮影!ホームページ用の写真の撮り方
お店や仕事用のホームページで写真が必要だけど、何で撮影すればいいの? デジカメ?一眼レフ? と悩まれるかたは多いと思いま [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/kindle-banner.webp)