文章标签

首先要考虑的是：您真的需要吗？ 如果可以，在图标旁边添加文本已被反复证明是最易访问和最清晰的UX（参见苹果的最新失误）。但是，如果您确实需要……

以下是由 Andy Bell 提供的一个巧妙技巧，现在回想起来似乎有点显而易见：如果您将 SVG 的宽度和高度设置为 1em，那么您可以使用font-size属性更改其大小。…

这是 Marco Hengstenberg 对无障碍 SVG 标记模式的精彩介绍。以下是一个理想的示例

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>

许多 Unicode 符号本身就是不错的图标，例如箭头（←）、标记（✘）和对象（✂︎）。您可以像普通字体字形一样为这些符号着色。此外，还有表情符号，我们都熟悉的那些彩色小家伙。…

最近我看了很多自然纪录片。我喜欢它们，你可以非常专注地观看，也可以将其作为背景电视。我非常喜欢最初的《蓝色星球》，所以它…

这是我前几天收到的一道问题？

对于一个复杂的单页应用程序，您会建议使用图标字体还是内联 SVG？两者是否存在特定的无障碍问题？无障碍访问对我们尤其重要，因为学校使用我们的

Etsy 从生产环境中的图标字体转向使用 SVG。它将是一个内联<svg>系统，但为了便于使用，将抽象为一个<etsy-icon>自定义元素。

几点看法

• 我能理解这种需求

向 Dave Gandy 和 Font Awesome 团队致敬

Font Awesome 5 的 Kickstarter 筹集了 1,076,940 美元，获得了 35,549 位支持者，使其成为有史以来资金最充足和支持者最多的软件 Kickstarter 项目。

资助者将获得什么？1,000 多个…

Wenting Zhang 使用 HTML 和 CSS 创建了 512 个 (!) 图标。通常只有一个元素，偶尔会添加额外的元素，并使用边框、背景和盒阴影等绘制。

看起来 Wenting 也遇到了Nicolas 遇到的相同错误…