Web-icons-material-file-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">attachment</i> | attachment |
<i class="material-icons custom">cloud</i> | cloud |
<i class="material-icons custom">cloud_circle</i> | cloud_circle |
<i class="material-icons custom">cloud_done</i> | cloud_done |
<i class="material-icons custom">cloud_download</i> | cloud_download |
<i class="material-icons custom">cloud_off</i> | cloud_off |
<i class="material-icons custom">cloud_queue</i> | cloud_queue |
<i class="material-icons custom">cloud_upload</i> | cloud_upload |
<i class="material-icons custom">file_download</i> | file_download |
<i class="material-icons custom">file_upload</i> | file_upload |
<i class="material-icons custom">folder</i> | folder |
<i class="material-icons custom">folder_open</i> | folder_open |
<i class="material-icons custom">folder_shared</i> | folder_shared |