html - 如何在内容CSS3中隐藏图像地址

Question

在这个主题中有 this address模板怪物现场演示

我在标题中找不到图片地址 5 图标!(首页关于博客元素联系方式)

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

Answer 1

在现代网页设计中，我们想要实现两件事(除其他外):

• 最短的加载时间。减少请求资源的数量是实现这一目标的主要方法。要减少图像数量，可以使用 spriting。
• 各种分辨率的清晰图标。使用基于像素的格式无法轻松实现这一点。解决方案是使用矢量格式，如 SVG 或字体。

Font Awesome 元素对此有所帮助。它在 unicode 的私有(private)使用部分提供带有图标的字体。它还提供了你可以引用的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 伪元素中。您可以对元素应用进一步的样式。您链接到的演示增加了字体大小等。

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