【Font Awesome】の使い方・始め方の手順をわかりやすく解説!

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「【Font Awesome】の使い方」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・手軽に「アイコン」を使用したい人
・HTML/CSSを勉強中の人
・「Font Awesome」の使い方を知りたい人

「Font Awesome」を読み込んでいこう!

まずは、「CDNJS」というサイトの「Font Awesome」の項目にアクセスします!

font-awesome - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
font-awesome - The iconic SVG, font, and CSS toolkit - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

すると、このようなページが開くと思います!

次にタブを「CSS」に切り替えます…!

この画面の中の一番上にある「all min css」というリンクを「コピー」します!

先ほどコピーしたコードを、「Font Awesome」を使用したいファイルの<head>内に「貼り付け」てください…!

こんな感じで<link>タグで貼り付ければOKです!

 

これで「Font Awesome」の読み込みは完了です…!(やった~!)

 

おさかな
おさかな

あともう少し…!一緒にがんばろう!!

 

実際につかってみよう!

それでは、実際に「アイコン」を使用していきましょう!

まず、「Font Awesome」の公式サイトへアクセスします…!

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

すると、このようなページが表示されると思うので、メニューの中から「Icons」という項目を「クリック」します!

 

すると、このように「アイコン」の一覧が表示されます!

この中から、使用したいアイコンを「クリック」します…!

すると、このような画面が表示されたのが、確認できると思います…!

この画面の赤枠の中にある「コード」をクリックして「コピー」します…!

「アイコン」を使用したい場所に、先ほどコピーした「コード」を貼り付けます…!
(こんな感じ…!)

ファイルを表示して、無事にアイコンが表示されていれば、完了です…!

これで、アイコンを自由に設置することができます!

おつかれさまでした🚩

【Google】が提供する「Material Icons(マテリアルアイコン)」って何?使い方・手順を徹底解説!
【Material Icons(マテリアルアイコン)】の使い方、手順をわかりやすく丁寧に解説!Googleが提供するサービスで、簡単に「アイコン」を利用することができます!Web制作に関わる方は必見!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

感想・まとめ

今回は「【Font Awesome】の使い方」について、書いていきました…!

いかがだったでしょうか?

最初は慣れないかと思いますが、ざっくり流れを把握しておけば大丈夫です!

おさかな
おさかな

わからなくなったら「おさかなび」で確認してね!

Webサイトを作成するときに「アイコン」を使用することで、デザインの幅がすごく広がると思うので、ぜひ積極的に活用してみてください…!

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

タイトルとURLをコピーしました