Web-icons-material-maps-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">beenhere</i> | beenhere |
<i class="material-icons custom">directions</i> | directions |
<i class="material-icons custom">directions_bike</i> | directions_bike |
<i class="material-icons custom">directions_boat</i> | directions_boat |
<i class="material-icons custom">directions_bus</i> | directions_bus |
<i class="material-icons custom">directions_car</i> | directions_car |
<i class="material-icons custom">directions_railway</i> | directions_railway |
<i class="material-icons custom">directions_run</i> | directions_run |
<i class="material-icons custom">directions_subway</i> | directions_subway |
<i class="material-icons custom">directions_transit</i> | directions_transit |
<i class="material-icons custom">directions_walk</i> | directions_walk |
<i class="material-icons custom">flight</i> | flight |
<i class="material-icons custom">hotel</i> | hotel |
<i class="material-icons custom">layers</i> | layers |
<i class="material-icons custom">layers_clear</i> | layers_clear |
<i class="material-icons custom">local_activity</i> | local_activity |
<i class="material-icons custom">local_airport</i> | local_airport |
<i class="material-icons custom">local_atm</i> | local_atm |
<i class="material-icons custom">local_bar</i> | local_bar |
<i class="material-icons custom">local_cafe</i> | local_cafe |
<i class="material-icons custom">local_car_wash</i> | local_car_wash |
<i class="material-icons custom">local_convenience_store</i> | local_convenience_store |
<i class="material-icons custom">local_dining</i> | local_dining |
<i class="material-icons custom">local_drink</i> | local_drink |
<i class="material-icons custom">local_florist</i> | local_florist |
<i class="material-icons custom">local_gas_station</i> | local_gas_station |
<i class="material-icons custom">local_grocery_store</i> | local_grocery_store |
<i class="material-icons custom">local_hospital</i> | local_hospital |
<i class="material-icons custom">local_hotel</i> | local_hotel |
<i class="material-icons custom">local_laundry_service</i> | local_laundry_service |
<i class="material-icons custom">local_library</i> | local_library |
<i class="material-icons custom">local_mall</i> | local_mall |
<i class="material-icons custom">local_movies</i> | local_movies |
<i class="material-icons custom">local_offer</i> | local_offer |
<i class="material-icons custom">local_parking</i> | local_parking |
<i class="material-icons custom">local_pharmacy</i> | local_pharmacy |
<i class="material-icons custom">local_phone</i> | local_phone |
<i class="material-icons custom">local_pizza</i> | local_pizza |
<i class="material-icons custom">local_play</i> | local_play |
<i class="material-icons custom">local_post_office</i> | local_post_office |
<i class="material-icons custom">local_printshop</i> | local_printshop |
<i class="material-icons custom">local_see</i> | local_see |
<i class="material-icons custom">local_shipping</i> | local_shipping |
<i class="material-icons custom">local_taxi</i> | local_taxi |
<i class="material-icons custom">map</i> | map |
<i class="material-icons custom">my_location</i> | my_location |
<i class="material-icons custom">navigation</i> | navigation |
<i class="material-icons custom">person_pin</i> | person_pin |
<i class="material-icons custom">pin_drop</i> | pin_drop |
<i class="material-icons custom">place</i> | place |
<i class="material-icons custom">rate_review</i> | rate_review |
<i class="material-icons custom">restaurant_menu</i> | restaurant_menu |
<i class="material-icons custom">satellite</i> | satellite |
<i class="material-icons custom">store_mall_directory</i> | store_mall_directory |
<i class="material-icons custom">traffic</i> | traffic |
<i class="material-icons custom">terrain</i> | terrain |