CSS3字体图标怎么用

CSS3 字体图标是一种使用字体文件（如 .woff, .woff2, .ttf, .eot, .svg 等）来显示图标的技术。这种方法允许你像使用文本一样设置图标的样式，例如更改颜色、大小和阴影等。要使用 CSS3 字体图标，请按照以下步骤操作：

1. 选择一个字体图标库：有许多可用的字体图标库，如 Font Awesome、Ionicons、Material Icons 等。你可以从它们的官方网站下载所需的字体文件和相应的 CSS 文件。

2. 将字体文件添加到项目中：将下载的字体文件（如 .woff, .woff2, .ttf, .eot, .svg 等）放到项目的文件夹中，例如放在一个名为 “fonts” 的文件夹里。

3. 引入字体图标库的 CSS 文件：在你的 HTML 文件中，使用 <link> 标签引入字体图标库的 CSS 文件。例如，如果你使用的是 Font Awesome，可以这样引入：

   <link rel="stylesheet" href="fonts/fontawesome.min.css">
   

   或者，将 CSS 文件内容直接粘贴到你的 CSS 文件中。

4. 使用字体图标：在你的 HTML 文件中，使用 <i> 或 <span> 标签，并为其添加一个类名，该类名应与你从字体图标库中选择的图标的类名相同。例如，如果你使用的是 Font Awesome，并想使用一个加号图标，可以这样写：

   <i class="fas fa-plus"></i>
   

5. 自定义图标样式：你可以像设置普通文本一样设置图标的样式。例如，更改颜色、大小和阴影等。以下是一个示例：

   .fas fa-plus {
     color: #333;
     font-size: 24px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   }
   

现在，你已经成功地在项目中使用了 CSS3 字体图标，并可以根据需要自定义它们的样式。