Web-icons-material-navigation-icons
提供:Dev Guides
素材-ナビゲーションアイコン
この章では、Googleの(マテリアル)ナビゲーションアイコンの使用方法について説明します。 以下の例に示すように、 custom はサイズと色を定義したCSSクラス名であると仮定します。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
次の表に、Googleの(マテリアル)ナビゲーションアイコンの使用法と結果を示します。 上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-
Usage | Result |
---|---|
<i class="material-icons custom">apps</i> | apps |
<i class="material-icons custom">arrow_back</i> | arrow_back |
<i class="material-icons custom">arrow_drop_down</i> | arrow_drop_down |
<i class="material-icons custom">arrow_drop_down_circle</i> | arrow_drop_down_circle |
<i class="material-icons custom">arrow_drop_up</i> | arrow_drop_up |
<i class="material-icons custom">arrow_forward</i> | arrow_forward |
<i class="material-icons custom">cancel</i> | cancel |
<i class="material-icons custom">check</i> | check |
<i class="material-icons custom">chevron_left</i> | chevron_left |
<i class="material-icons custom">chevron_right</i> | chevron_right |
<i class="material-icons custom">close</i> | close |
<i class="material-icons custom">expand_less</i> | expand_less |
<i class="material-icons custom">expand_more</i> | expand_more |
<i class="material-icons custom">fullscreen</i> | fullscreen |
<i class="material-icons custom">fullscreen_exit</i> | fullscreen_exit |
<i class="material-icons custom">menu</i> | menu |
<i class="material-icons custom">more_horiz</i> | more_horiz |
<i class="material-icons custom">more_vert</i> | more_vert |
<i class="material-icons custom">refresh</i> | refresh |