- 只应该使用 svg 或者icon格式的icon。svg 图片即使无限放大也能保持清晰。但是 png,jpeg 等格式的图片一放大就会模糊。
- icon 风格应与字体格式一致,包括 大小,线条粗细,颜色,等等。
- 可以免费下载icon的网站:
https://heroicons.com/
https://phosphoricons.com/
https://ionic.io/ionicons
https://icons8.com/ - emoji 也可以代替 icon,不是一定非要到网上找 icon。windows: windows logo 和 点号键一起按就出现 emoji
- 要使用svg icon,可以下载图形。也可以直接copy svg 代码到 HTML 中。
- svg 是 HTML 元素之一。
- 设置 svg 图形颜色:
outline svg 使用 stroke 设置颜色。
solid svg 使用 fill 设置颜色。 - 除了颜色,可以设置 svg 大小,还可以设置 border,background-color 属性。
例子:
<figure class="chair">
<img src="chair-2.jpg" alt="Chair" />
<div class="chair-box">
<h3>The Worker Bee</h3>
<ul class="chair-details">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
<span>Work</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Comfortable for 8h</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Vegan leather</span>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="chair-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
/>
</svg>
<span>Weighs 22 kg</span>
</li>
</ul>
<div class="chair-price">
<strong>525€</strong>
<a href="#" class="btn btn--small">Add to cart</a>
</div>
</div>
</figure>
CSS
.chair-icon {
stroke: #087f5b;
width: 24px;
height: 24px;
}