Web图标 - 简介

图标是用于表示网页上的特定操作或功能的符号.图标用于文档和应用程序,它们可以是可选择的,也可以是不可选择的.例如,我们在应用程序按钮上看到的图像都是图标,这些按钮是可选择的.同样,当我们使用图标作为公司徽标时,它通常是不可选择的.

在Windows环境中,如果我们将系统卷静音,它将在一个帮助下表示图标,如下所示.

mute

使用网页图标,我们可以表示加载页面,禁用选项,链接,重定向等.这些图标可以翻转,旋转,调整大小,镶边,倒置和着色.

图标字体

图标字体包含符号和字形.加载所需字体后,您可以使用该图标的类名来使用该字体提供的任何图标.我们还可以为图标应用不同的颜色,并使用CSS属性调整它们的大小.有几个图标库(字体)提供图标.本教程重点介绍三种主要字体,即 :

  • Font Awesome

  • Bootstrap Glyphicons

  • Google的素材图标

字体真棒

此字体提供519免费可伸缩矢量图标.这个图书馆是完全免费的,无论是个人还是商业用途.这些图标可以轻松定制.最初,它们是为Bootstrap开发的.

Bootstrap Glyphicons

这是一个单色图标库,提供栅格图像格式,矢量图像格式和作为字体.它以字体格式提供超过250个字形.您可以在Web项目中使用这些字体.这些图标不是免费的,但您可以在基于Bootstrap的项目中使用它们而无需购买它们.

Google的材料图标

Google提供约750个在"材料设计指南"下设计的图标,这些图标称为材料设计图标.这些图标很简单,它们支持所有现代Web浏览器.由于这些图标是基于矢量的,因此它们也是可扩展的.要使用这些图标,我们必须加载字体(库) material-icons .