素材-ソーシャルアイコン

この章では、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">cake</i>	cake
<i class="material-icons custom">domain</i>	domain
<i class="material-icons custom">group</i>	group
<i class="material-icons custom">group_add</i>	group_add
<i class="material-icons custom">location_city</i>	location_city
<i class="material-icons custom">mood</i>	mood
<i class="material-icons custom">mood_bad</i>	mood_bad
<i class="material-icons custom">notifications</i>	notifications
<i class="material-icons custom">notifications_active</i>	notifications_active
<i class="material-icons custom">notifications_none</i>	notifications_none
<i class="material-icons custom">notifications_off</i>	notifications_off
<i class="material-icons custom">notifications_paused</i>	notifications_paused
<i class="material-icons custom">pages</i>	pages
<i class="material-icons custom">party_mode</i>	party_mode
<i class="material-icons custom">people</i>	people
<i class="material-icons custom">people_outline</i>	people_outline
<i class="material-icons custom">person</i>	person
<i class="material-icons custom">person_add</i>	person_add
<i class="material-icons custom">person_outline</i>	person_outline
<i class="material-icons custom">plus_one</i>	plus_one
<i class="material-icons custom">poll</i>	poll
<i class="material-icons custom">public</i>	public
<i class="material-icons custom">school</i>	school
<i class="material-icons custom">share</i>	share
<i class="material-icons custom">whatshot</i>	whatshot

Web-icons-material-social-icons

素材-ソーシャルアイコン