时间戳

首页 > 解决方案 > 是否有另一种不使用引导程序来获取图标的方法

html - 是否有另一种不使用引导程序来获取图标的方法

问题描述

我有使用纯 html 和 CSS 编写的 HTML 代码，我需要向其中添加像“home”这样的图标，但我不知道如何，我不知道如何使用引导程序，所以请告诉我如何获取图标使用 HTML 或其他内容

标签： htmlcss

解决方案

在我看来，最好的方法是将任何你想要的图标作为 SVG 代码，例如，你可以将 fontawesome 图标下载为 SVG

然后通过这个网站缩小它们https://vecta.io/nano

之后将缩小的 SVG 代码添加到 HTML 并添加一些样式

通过这种方式，您减少了 HTTP 请求，同时又不会降低质量

ps：您必须确定 [viewBox="0 0 384 512"] 属性值的最佳设置，因为如果您的 SVG 代码没有正确的 viewBox 属性值，那么您将无法通过 CSS 缩放您的 SVG

.iconsWrapper {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.icon {
    width: 100%;
    height: 100%;
}

.stack {
    fill: #F48024;
}
<span class="iconsWrapper">
  <svg class="stack icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" xmlns:v="https://vecta.io/nano">
      <path d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z" />
  </svg>
</span>

推荐阅读