W3.CSSアイコン
アイコンライブラリ
W3.CSSを使用すると、次のような好きなアイコンライブラリを使用できます。
- FontAwesomeアイコン
- Googleマテリアルデザインアイコン
- ブートストラップアイコン
アイコンライブラリの使用
アイコンを挿入するには：
- <head>セクションにCDN（コンテンツ配信ネットワーク）のアイコンライブラリを含めます。
- アイコンクラスの名前を任意のインラインHTML要素に追加します。
ヒント： <i>要素と<span>要素は、アイコンを追加するために広く使用されています。
アイコンのサイズを制御するには、アイコンのfont-sizeプロパティを変更するか、次のいずれかのw3- sizeクラスを使用します。
- w3-小さな
- w3-小さい
- w3-大
- w3-xxlarge
- w3-xxxlarge
- w3-ジャンボ
いくつかのFontAwesomeアイコン
fa fa-home
fa-bars
fafa-矢印-左
fafa-矢印-右
fafa-検索
fafa-閉じる
fafa-リフレッシュ
fafa-ゴミ箱
痛い
fa fa-car
fafa-トラック
fafa-plane
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
アイコンの完全なリストについては、アイコンリファレンスをご覧ください。
いくつかのGoogleマテリアルデザインアイコン
家
家
家
メニュー
メニュー
メニュー
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
探す
探す
探す
選ぶ
選ぶ
選ぶ
リフレッシュ
リフレッシュ
リフレッシュ
消去
消去
消去
人
人
人
Directions_car
Directions_car
Directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
いくつかのブートストラップアイコン
家
メニューハンバーガー
arrow_back
arrow_forward
探す
削除する
リフレッシュ
ごみ
ユーザー
ファイル
印刷
飛行機
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>