Google Icon Font :网页中直接使用的免费图标?

「图标」运用得当,绝对胜过用文字描述,以往要在网页里使用图标,可以使用图片文件,但不论是更改尺寸还是更改颜色都相当麻烦,而现在大多使用 Icon Font,将图标变成字形来使用,这样日后维护要改尺寸大小、颜色就相当方便。

「Google Font」内现在就有提供成套风格且免费的 Icon Font 供使用者应用,如果习惯使用图片文件,每个图标同样都有提供 PNG、SVG 图片文件格式,不论是应用在网页、Android 或是 iOS 都不是问题。

1、进入Google Icon Font网站后,可以点击How to implement 内的[ Developer guide ]来取得 Material Icon Font 的引用语法及后续使用方法。

Google Icon Font :网页中直接使用的免费图标?

Google Icon Font :网页中直接使用的免费图标?

Google Icon Font :网页中直接使用的免费图标?

2、网页上的使用语法。

Google Icon Font :网页中直接使用的免费图标?

3、知道引用、CSS 及网页上要如何使用后,我们就可以回到原网页通过分类或关键字来找寻要使用的 ICON FONT。

Google Icon Font :网页中直接使用的免费图标?

4、点击要使用的 ICON,右侧便会弹出相关语法与下载,使用这可以根据需求取出相关资源。

Google Icon Font :网页中直接使用的免费图标?

5、在网页编辑器中,我们就可以根据使用指南内的使用方式将引用语法、CSS搬到相关位置。

Google Icon Font :网页中直接使用的免费图标?

6、最后,将 ICON FONT 的使用语法搬到<body></body>内的位置,就完成了。

Google Icon Font :网页中直接使用的免费图标?