要在 HTML 中添加自定义图标,可以使用字体图标或矢量图标。
字体图标是一种通过使用字体而不是图像来呈现图标的方法。常见的字体图标库包括 FontAwesome、Material Icons、Ionicons 等。要使用字体图标,需要将字体图标库的 CSS 文件链接到 HTML 文件中,然后在 HTML 中使用相应的类名来引用所需的图标。
例如,使用 FontAwesome 图标库:
首先,在 head 标签中添加以下代码:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-8J5u+kw9v1tVd2W3Kb1Ud+ZOXjKzSf1yFvUuLs6y7W9q7I4Z+Zxg6qRnNlq1W9zRi0pI7K1eK1yOqM3qUzv6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
然后,在需要添加图标的地方,使用以下代码:
<i class="fas fa-heart"></i>
其中,fas
是 FontAwesome 中的一种字体样式,fa-heart
是要使用的具体图标名称。
矢量图标是一种使用 SVG(可缩放矢量图形)格式的图标。要使用矢量图标,需要将 SVG 文件链接到 HTML 文件中,然后使用 <svg>
标签将图标插入到 HTML 中。
例如,使用 Google Material Icons:
首先,在 head 标签中添加以下代码:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
然后,在需要添加图标的地方,使用以下代码:
<i class="material-icons">favorite</i>
其中,material-icons
是 Material Icons 的类名,favorite
是要使用的具体图标名称。
关键词高亮:字体图标、矢量图标、FontAwesome、Material Icons、SVG