图标是代表网页上特定操作的符号。 图标字体包含符号和字形。有几个图标库（字体）提供图标并可以在 HTML 网页上使用。
网络开发人员经常使用的突出图标字体是 Font Awesome、Bootstrap Glyphicons 和 Google 的材质图标我>.
Font Awesome – 该库完全免费，可供商业和个人使用。该字体为我们提供了 519 个免费可缩放矢量图标。这些可以轻松定制，最初是由 Bootstrap 开发的。
立即学习“前端免费学习笔记（深入）”；
Bootstrap Glyphicons – 这是一个单色图标库，可用于光栅图像格式、矢量图像格式和字体。它提供了超过 250 个字体格式的字形。您可以在网络项目中使用这些字体，但它们不是免费的。
Google 的材料图标 – 谷歌作为一组提供的“材料设计指南”下设计了 750 个图标，这些图标被称为材料设计图标。几乎所有网络浏览器都支持这些图标。要使用这些图标，您必须加载字体（库）材质图标。
让我们在下面的示例中使用上述图标字体库。
字体真棒图标
示例
在下面的示例中，
首先，我们加载了 Font Awesome 库。
然后我们使用其中一个图标，并将该图标类的名称添加到
标记内的 HTML 元素中。
然后，我们通过使用 CSS 定义图标大小并将其与类名称一起使用来增加图标的大小。
我们已将尺寸声明为 100px。
Set the size of the icons in HTML i.size { font-size: 100px; }This is a Font Awesome Icon
We have set the size of this icon to 100px.
正如我们在输出中看到的，我们使用了印度货币的图标，并使用 CSS 定义了其大小。
Google 材质图标
示例
在下面的示例中，
我们已加载材质图标库。
然后我们使用其中一个图标，并将该图标类的名称添加到
标记内的 HTML 元素中。
我们使用了名为traffic的图标，因为它属于操作类别。
然后，我们通过使用 CSS 定义图标大小并将其与类名称一起使用来增加图标的大小。
Set the size of the icons in HTML i.size { font-size: 150px; }This is a Google Material Icon
We have set the size of this icon to 150px.
traffic
正如我们在输出中看到的，我们使用了交通灯图标并使用 CSS 定义了其大小。
引导字形
示例
在下面的示例中，
首先，我们加载了 Bootstrap Glyphicons 库。
然后我们使用其中一个图标，并将该图标类的名称添加到
标记内的 HTML 元素中。
在示例中，我们使用了名为 tree 的图标，其类名称为 tree-decidious。
Set the size of the icons in HTML i.mysize { font-size: 100px; }This is a Bootstrap Glyphicons Icon
We have set the size of this icon to 100px.
正如我们在输出中看到的，我们使用了树的图标并使用 CSS 定义了它的大小。
以上就是设置HTML中图标的大小的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551542.html
微信扫一扫 
支付宝扫一扫 
