在使用CSS的链接中添加图标的标准方法是什么？ [英] What is the standard way to add an icon to a link with CSS?

问题描述

我习惯于使用 padding + background-image 在链接旁边放置一个图标。

I'm used to use padding + background-image to place an icon next to a link.

这种方法有很多例子。以下是这里：

There are many example of this approach. Here is one from here:

 <a class="external" href="http://www.othersite.com/">link</a>

  a.external {  
     padding-right: 15px;  
     background: transparent url(images/external-link-icon.gif) no-repeat top right;  
 }    

但是大多数浏览器不打印背景图片，这是恼人的。

But most browser don't print background image, which is annoying.

标准放置图标在语义上正确的链接旁边，在所有情况下都有效？

What is the standard to place icon next to links which is semantically correct and works in all cases?

EDIT

CSS ：之前和：之后？

a.test:after {
    padding-right: 5px;
    content: url(../pix/logo_ppk.gif);
}

推荐答案

并通过CSS类放置一个背景图像（就像你的例子）。

I'd personally pad it and put a background image via a CSS class (just like your example). It's by far the lightest route, it keeps the document light and semantic.

如果打印它们真的很重要（我的意思是真的很重要）

If printing them really matters (and I do mean really matters) stick a real image in there but be aware that it does screw up markup from a semantic aspect.

也许一个更好的妥协解决方案是拥有一个可打印的版本使用图像（通过某种服务器大小或某些JS，用实际图像替换CSS类）。

Perhaps a better compromise solution would be to have a "printable version" which uses images instead (either by something server-size or some JS that replaces the CSS class with an actual image.

这篇关于在使用CSS的链接中添加图标的标准方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！