📌  相关文章
📜  W3.CSS-图标(1)

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

W3.CSS 图标

W3.CSS 是一个轻量级的 CSS 框架，设计用于构建基于移动设备和桌面设备的 Web 应用程序。W3.CSS 图标是 W3.CSS 框架中的一部分，它包括一组美观的纯 CSS 图标，可以方便地在网页中使用。

如何使用 W3.CSS 图标

使用 W3.CSS 图标非常简单，只需要将以下代码复制到你的 HTML 文件中即可：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<i class="w3-jumbo w3-spin fa fa-spinner"></i>

</body>
</html>
图标分类

W3.CSS 图标按照功能分类，包括常见的图标分类如下：

  • Web 应用程序
  • 文件
  • 方向
  • 媒体控件
  • 社交媒体
  • 设备
  • 手势
图标样式

W3.CSS 图标具有以下几种样式：

  • w3-white
  • w3-black
  • w3-green
  • w3-yellow
  • w3-red
  • w3-blue
  • w3-purple
  • w3-pink

以下是一个使用不同样式的 W3.CSS 图标示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<i class="w3-jumbo w3-spin fa fa-spinner w3-blue"></i>
<i class="w3-jumbo fa fa-bug w3-pink"></i>
<i class="w3-jumbo fa fa-coffee w3-purple"></i>

</body>
</html>
图标示例

以下是一些常见的 W3.CSS 图标示例：

  • 编辑
<i class="fa fa-pencil"></i>
  • 删除
<i class="fa fa-trash"></i>
  • 下载
<i class="fa fa-download"></i>
  • 搜索
<i class="fa fa-search"></i>
  • 邮件
<i class="fa fa-envelope"></i>
  • 音乐
<i class="fa fa-music"></i>

W3.CSS 图标具有美观简单的特点，并且非常容易使用。现在就使用 W3.CSS 图标来美化你的网站吧！