アイコンライブラリ
W3.CSSを使用すると、同様に任意のアイコンライブラリを使用することができます。
- フォント恐ろしいアイコン
- Googleの素材のアイコン
- ブートストラップのアイコン
アイコンの使用
アイコンを使用するには、HTMLの<私>要素のクラスにアイコンの名前を追加します。
アイコンのサイズを制御するには、アイコンのフォントサイズのプロパティを変更、またはw3- サイズクラスを使用します。
- W3-小さな
- W3-小
- W3-大
- W3-xxlarge
- W3-xxxlarge
フォント恐ろしいアイコン
FA FA-ホーム
FA FA-バー
FA FA-矢印左
FA FA-矢印右
FA FA-検索
FA FA-近いです
FA FA-リフレッシュ
FA FA-ゴミ
FA FA-男性
FA FA-車
FA FA-トラック
FA FA-プレーン
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud
w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud
w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud
w3-text-teal"
style="font-size:64px"></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="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i
class="material-icons w3-xlarge">cloud</i>
<i class="material-icons
w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i
class="material-icons w3-text-teal" style="font-size:64px">cloud</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="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon
glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon
glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud
w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
»それを自分で試してみてください