📜  Web图标-简介

📅  最后修改于: 2020-10-17 05:59:07             🧑  作者: Mango


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

在Windows环境中,如果我们将系统音量设为静音,它将在一个图标的帮助下表示,如下所示。

静音

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

图标字体

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

  • 字体很棒
  • 自举雕文
  • Google的素材图标

字体很棒

该字体提供519个免费可缩放矢量图标。该库是完全免费的,可用于个人和商业用途。这些图标可以轻松自定义。最初,它们是为Bootstrap开发的。

自举雕文

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

Google的素材图标

Google提供了大约750个根据“材料设计准则”设计的图标,这些图标被称为“材料设计”图标。这些图标很简单,并且支持所有现代Web浏览器。由于这些图标是基于矢量的,因此它们也是可伸缩的。要使用这些图标,我们必须加载字体(库) material-icons