材料-社会图标

本章介绍了 Google 的（Material）社交图标的用法。假设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 的（Material）社交图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="material-icons custom">蛋糕</i> 蛋糕
<i class="material-icons custom">域</i> 领域
<i class="material-icons custom">组</i> 团体
<i class="material-icons custom">group_add</i> 添加组
<i class="material-icons custom">location_city</i> 位置_城市
<i class="material-icons custom">心情</i> 情绪
<i class="material-icons custom">mood_bad</i> 心情不好
<i class="material-icons custom">通知</i> 通知
<i class="material-icons custom">notifications_active</i> 通知活动
<i class="material-icons custom">notifications_none</i> 通知_无
<i class="material-icons custom">notifications_off</i> 通知关闭
<i class="material-icons custom">notifications_paused</i> 通知_暂停
<i class="material-icons custom">页面</i> 页面
<i class="material-icons custom">party_mode</i> 派对模式
<i class="material-icons custom">人</i> 人们
<i class="material-icons custom">people_outline</i> 人物大纲
<i class="material-icons custom">人</i> 人
<i class="material-icons custom">person_add</i> 添加人员
<i class="material-icons custom">person_outline</i> 人物大纲
<i class="material-icons custom">plus_one</i> 加一
<i class="material-icons custom">投票</i> 轮询
<i class="material-icons custom">公共</i> 民众
<i class="material-icons custom">学校</i> 学校
<i class="material-icons custom">分享</i> 分享
<i class="material-icons custom">whatshot</i> 什么比较流行