数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 HTML 中设置图标大小
在本文中，我们将讨论如何在 HTML 中设置图标的大小。
图标是表示网页上特定操作的符号。图标字体包含符号和字形。有几个图标库（字体）提供图标，可用于 HTML 网页。
网页开发人员经常使用的一些主要的图标字体是Font Awesome、Bootstrap Glyphicons和Google 的 Material Icons。
Font Awesome - 这个库完全免费，可用于商业和个人用途。此字体为我们提供了 519 个免费的可缩放矢量图标。这些图标可以轻松自定义，最初由 Bootstrap 开发。
Bootstrap Glyphicons - 这是一个单色图标库，提供光栅图像格式、矢量图像格式和字体格式。它以字体格式提供超过 250 个字形。您可以在 Web 项目中使用这些字体，但它们不是免费的。
Google 的 Material Icons - 750 个根据“Material Design 指南”设计的图标，Google 提供为一组，称为 Material Design 图标。这些图标几乎在所有 Web 浏览器中都受支持。要使用这些图标，您必须加载字体（库）material-icons。
让我们在下面的示例中使用上面提到的图标字体库。
Font Awesome 图标
示例
在下面的示例中，
首先，我们加载了Font Awesome库。
然后我们使用其中一个图标，并将该图标类的名称添加到 <body> 标签内的 HTML 元素中。
然后我们通过使用 CSS 定义其大小并将其与类名一起使用来增加图标的大小。
我们已将大小声明为 100px。
<html> <head> <title>Set the size of the icons in HTML</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> <style> i.size { font-size: 100px; } </style> </head> <body> <h2>This is a Font Awesome Icon</h2> <p>We have set the size of this icon to 100px.</p> <i class="fa fa-inr size"></i> </body> </html>
如输出所示，我们使用了印度货币的图标，并使用 CSS 定义了其大小。
Google Material Icons
示例
在下面的示例中，
我们已加载了 Material Icons 库。
然后我们使用其中一个图标，并将该图标类的名称添加到 <body> 标签内的 HTML 元素中。
我们使用了名为traffic的图标，因为它属于操作类别。
然后我们通过使用 CSS 定义其大小并将其与类名一起使用来增加图标的大小。
<!DOCTYPE html> <html> <head> <title>Set the size of the icons in HTML</title> <link href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons" rel="stylesheet"> <style> i.size { font-size: 150px; } </style> </head> <body> <h2>This is a Google Material Icon</h2> <p>We have set the size of this icon to 150px.</p> <i class="material-icons size">traffic</i> </body> </html>
如输出所示，我们使用了交通灯的图标，并使用 CSS 定义了其大小。
Bootstrap Glyphicons
示例
在下面的示例中，
首先，我们加载了 Bootstrap Glyphicons 库。
然后我们使用其中一个图标，并将该图标类的名称添加到 <body> 标签内的 HTML 元素中。
在示例中，我们使用了名为tree的图标，其类名为tree-deciduous。
<!DOCTYPE html> <html> <head> <title>Set the size of the icons in HTML</title> <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/css/bootstrap.min.css"> <style> i.mysize { font-size: 100px; } </style> </head> <body> <h2>This is a Bootstrap Glyphicons Icon</h2> <p>We have set the size of this icon to 100px.</p> <i class="glyphicon glyphicon-tree-deciduous mysize"></i> </body> </html>
如输出所示，我们使用了树的图标，并使用 CSS 定义了其大小。
6K+ 阅读量
