[HTML・CSS]fontawesomeを使ってアイコンを表示する方法

2020/10/31

HTML・CSS

今回は、htmlを用いてサイトを構築する際に簡単にアイコンを表示させる方法について今回は、紹介したいと思います。

手順としては、大きく分けると2つに分かれます。

1つ目の手順としては、headの中に下のコードを書き込みます。

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

そうしましたら、2つ目の手順としては、下の図のようにアイコンを表示させる為のコードをアイコンを表示させたい個所に記載します。

<i class="fa fa-check "></i> 

すると、下のようにアイコンを表示することが出来ます。

また、「fa fa-check」の部分を変更すると他のアイコンも表示する事が出来ます。

HTML・CSS

CSS , fontawesome , HTML , PC , アイコン , サンプルコード , サンプルプログラム , パソコン , プログラミング , 簡単

2020/07/11

Twitterでリンクをおしゃれに設定するための方法(Twitterカード)

HTML・CSS

今回は、TwitterでURLをつぶやいた時にそのURLに画像等を付けるための機能(Twitter...

Read more...

2020/12/17

[HTML・CSS]ボタン(要素)に影を付ける方法

HTML・CSS

今回は、サイトを作成する際にボタン等の要素に影を付ける方法について紹介したいと思います。 結...

Read more...

2020/11/03

[HTML・CSS]箇条書き(ul)の左側にある点を消す方法

HTML・CSS

今回は、htmlで箇条書きをしている際に用いるulの左にある点の消し方を紹介したいと思います。 ...

Read more...

2020/06/13

[HTML・CSS]サイトをスマホ・タブレット・PCごとに設定する方法

HTML・CSS

今回は、画面のサイズ(スマホ・タブレット・PC)ごとにCSSを設定する方法について紹介したいと思い...

Read more...

2020/07/27

[HTML・CSS]背景色でグラデーションにする方法

HTML・CSS

今回は、HTML・CSSにおいて背景色をグラデーションにする方法について紹介したいと思います。 ...

Read more...