📌  相关文章
📜  输入内的图标 - Html (1)

📅  最后修改于: 2023-12-03 15:12:18.024000             🧑  作者: Mango

输入内的图标 - HTML

在 HTML 中，可以使用图标来增强页面的外观和功能。图标可以表示各种东西，例如箭头，菜单，搜索等，还可以用于表明页面和内容的特定状态。

使用图标

HTML中的图标通常使用字体图标或SVG图标来实现。这些图标通常以 Unicode 字符或 CSS 类的形式呈现。

字体图标

字体图标是一种使用字体方式来呈现图标的技术。它们由一组字体文件组成，其中每个文件包含一个或多个图标。字体图标可以通过将 Unicode 值添加到 HTML 元素的 content 属性中来呈现。

下面是一个使用 Font Awesome 字体图标库的示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
  <h1><i class="fas fa-address-book"></i> My Contacts</h1>
  <p><i class="fas fa-phone"></i> (123) 555-6789</p>
  <p><i class="fas fa-envelope"></i> info@example.com</p>
</body>
</html>

在这个例子中，<i> 元素用于表示图标，该元素的 class 属性指定了要使用的字体图标库和图标的名称。

SVG图标

SVG（可缩放矢量图形）是一种使用 XML 语言创建的图形。SVG 图标可以直接作为 <svg> 元素插入到 HTML 中，也可以使用 <use> 元素将其插入到其他元素中。

下面是一个使用 SVG 图片的示例代码：

<!DOCTYPE html>
<html>
<body>
  <h1><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M21.9,15c-1.1,0.1-2,0.5-2.7,1.2c-0.8,0.8-1.2,1.6-1.2,2.7c0,2.2-1.8,4-4,4s-4-1.8-4-4c0-1.1-0.4-1.9-1.2-2.7c-0.7-0.7-1.6-1.1-2.7-1.2V13c0.9,0.1,1.6,0.5,2.2,1.1c0.6,0.6,1,1.3,1.1,2.2c-1,0.3-1.8,0.9-2.5,1.6c-0.7,0.7-1.3,1.5-1.6,2.5c-0.5-0.2-1.1-0.4-1.7-0.4c-1.7,0-3,1.3-3,3h2c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2H4.4c-0.1,0.5-0.4,0.9-0.7,1.2c-0.4,0.4-0.9,0.6-1.4,0.6c-1.1,0-2-0.9-2-2s0.9-2,2-2c0.5,0,1,0.2,1.4,0.6c0.3,0.3,0.6,0.7,0.7,1.2H21.9z"></path>
  </svg> Contact Us</h1>
  <p><svg viewBox="0 0 24 24">
    <path d="M19 10v1H5v-1H19m0-2H5v1h14v-1M8 16h8v1H8v-1m5-2h-2v2h2v-2z"></path>
  </svg> (123) 555-6789</p>
  <p><svg viewBox="0 0 24 24">
    <path d="M12 2.7c-5.8 0-10.5 4.7-10.5 10.5s4.7 10.5 10.5 10.5 10.5-4.7 10.5-10.5S17.8 2.7 12 2.7m5.5 12.6l-4 3.8c-0.4 0.4-1 0.4-1.4 0l-4-3.8c-0.8-0.8-0.3-2.3 0.8-2.3h1.9v-5.6c0-0.5 0.4-1 1-1s1 0.4 1 1v5.6h1.9c1.1 0 1.6 1.5 0.8 2.3z"></path>
  </svg> info@example.com</p>
</body>
</html>

在这个例子中，<svg> 元素用于展示图标，该元素的 viewBox 属性指定了图标的大小和位置，<path> 元素定义了图标的形状。

总结

HTML中的图标可用于更好地展示页面内容和状态。图标可以使用字体图标或SVG图标来实现，并根据需要直接插入到HTML中。引用图标库时，务必遵循所选库的文档和指南。

参考资料