css中怎么调用svg图标

在 CSS 中，我们可以轻松地调用 SVG 图标来美化我们的网站。接下来我将介绍一些简单的步骤来实现它。 首先，我们需要确保我们的 SVG 文件已经准备好了。我们可以创建一个单独的文件夹来放置所有的 SVG 图标。接下来，我们需要在 CSS 文件中为我们的 SVG 图标创建一个类。为此，我们可以使用以下代码：

.icon {
   display: inline-block;
   width: 24px;
   height: 24px;
   stroke-width: 0;
   fill: currentColor;
} 

接下来，我们需要将我们的 SVG 文件插入到我们的 HTML 代码中。为此，我们可以使用以下代码：

<svg class="icon" viewBox="0 0 24 24">
   <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2z M15 16.414l-3-3-3 3L7.586 14 11 10.586l-3-3 3-3L14.414 9 11 12.414z"></path>
</svg> 

在这个代码中，我们将我们的 SVG 图标插入到了一个 SVG 标签中，并为我们的图标添加了一个类 icon。 最后，我们需要将我们的 SVG 图标作为一个伪元素添加到我们的 CSS 中。为此，我们可以使用以下代码：

.button::before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;
   width: 24px;
   height: 24px;
   background-image: url('/icons.svg');
   background-repeat: no-repeat;
}.button.search::before {
   background-position: 0 0;
} 

在这段代码中，我们将我们的 SVG 图标作为一个背景图像添加，并用 background-position 属性来指定图标的位置。此外，我们还通过 ::before 和 ::after 伪元素为我们的按钮添加了图标。 这就是所有了！现在，我们已经成功地在我们的网站中使用了 SVG 图标。

总结：

在 CSS 中调用 SVG 图标很简单，只需要为 SVG 创建类并用 ::before 和 ::after 伪元素来添加图标。我们可以将 SVG 文件放在一个单独的文件夹中，并用背景图像将它们添加到我们的 CSS 中。这个过程很容易，并且可以让我们轻松地美化我们的网站。