3

在这个主题用这个地址的模板怪物现场演示

我在标题中找不到图像地址 5 图标！（首页关于博客项目联系方式）

使用技术是什么？我怎样才能隐藏像这个主题的图像的地址？

4

1 回答 1

3

在现代网页设计中，我们想要实现两件事（除其他外）：

  • 最小的加载时间。减少请求资源的数量是实现此目的的主要方法。为了减少图像的数量，可以使用精灵。
  • 每个分辨率上都有清晰的图标。使用基于像素的格式无法轻松实现这一点。解决方案是使用矢量格式，如 SVG 或字体。

Font Awesome项目对此有所帮助。它在 unicode 的私人使用部分提供了带有图标的字体。它还提供了您可以参考的 CSS，看起来像

...
.icon-edit:before {
  content: "\f044";
}
.icon-share:before {
  content: "\f045";
}
.icon-check:before {
  content: "\f046";
}
.icon-move:before {
  content: "\f047";
}
...

在您的 HTML 中，您可以执行以下操作

<nav><ul>
  <li class="icon-home">     Home </li>
  <li class="icon-envelope"> Contact </li>
</ul></nav>

并且图标将被插入到:before伪元素中。您可以对元素应用进一步的样式。您链接到的演示会增加字体大小等。

这种技术在两个文件中为您提供了数百个漂亮的图标，并且是一种将它们包含到您的标记中的简单方法。

于 2013-06-23T11:36:18.047 回答