TECH I.S.

CSSで簡単にアイコンを表示する方法


アイコンライブラリを使用すると、HTMLページにアイコンを簡単に追加できます。



アイコンを追加する方法

HTMLページにアイコンを追加する最も簡単な方法は、Font Awesomeなどのアイコンライブラリを使用することです。

指定されたアイコンクラスの名前を任意のインラインHTML要素に追加します(<i>または<span>)。

以下のアイコンライブラリのすべてのアイコンは、CSS(サイズ、色、影など)でカスタマイズできるスケーラブルなベクターです。


フォントの素晴らしいアイコン

Font Awesome アイコンを使用するには、fontawesome.comにアクセスしてサインインし、HTMLページの<head>セクションに追加するコードを取得します。

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Font Awesomeの使用を開始する方法について詳しくは、Font Awesome 5 チュートリアルをご覧ください。

ノート:ダウンロードもインストールも不要!

<!DOCTYPE html> <html> <head> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <i class="fas fa-cloud"></i> <i class="fas fa-heart"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> </body> </html>

結果:

自分で試してみる »

すべてのFont Awesomeアイコンの完全なリファレンスについては、アイコンリファレンスをご覧ください


Bootstrap アイコン

ブートストラップグリフアイコンを使用するには、HTMLページの<head>セクション内に次の行を追加します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

ノート:ダウンロードもインストールも不要!

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-thumbs-up"></i> </body> </html>

結果:

自分で試してみる »


Google アイコン

Google アイコンを使用するには、HTML ページの<head>セクション内に次の行を追加します。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

ノート:ダウンロードもインストールも不要!

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">雲</i> <i class="material-icons">お気に入り</i> <i class="material-icons">アタッチメント</i> <i class="material-icons">コンピューター</i> <i class="material-icons">トラフィック</i> </body> </html>

結果:

自分で試してみる »

すべてのアイコンの完全なリストについては、アイコンのチュートリアルをご覧ください。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細