在链接之前或之后放置图标以指示文件类型(例如：链接 Adobe PDF、音频或视频)的最佳做法是什么

Question

我的团队正在讨论在我们网站上各种媒体文件的链接后插入图标的最佳做法是什么。例如，链接到一个PDF，并希望插入一个图标图像，让用户知道这是一个PDF。这同样可以用于视频或音频文件。

我建议使用CSS，在上面放一个类，然后使用:after来创建一个元素。

我记得IE6和IE7不支持伪CSS类，但除此之外，会有更好的实践吗?

如果链接在无序列表中，我知道图标图像可以用来替换项目符号字符，但我不确定段落或其他HTML元素。

Answer 1

你可以在伪类之前或之后使用我认为这是一种方法，

然而，你可以通过添加一点额外的填充到你的链接和输入一个背景图像，你不应该需要添加类，因为你可以使用子字符串属性选择器来选择(目标)链接通过他们的扩展..

。

a[href$='.pdf'] {
  background: transparent url(pdf-icon.gif) center right no-repeat;
  padding-right: 20px;
}

使用属性选择器也可以用于:before或:after生成的元素，这些元素可以制作成足够大的内联块，以包含图像作为背景。

。

a[href$='.pdf']:after {
   content: url(pdf-icon.gif);
   margin-left: 4px;
   display: inline-block;
   width: 12px;
   height: 12px;
}

查看本页更多说明

Answer 2

使用CSS3在每个链接中添加pdf或其他图标的简单方法:

1。 CSS代码:

a[href$=".pdf"]
{
  background:url("your-pdf-image.png") no-repeat left;
  padding-left:25px;
}

2。 CSS代码:

a[href$=".pdf"]:before
{
  content:"f1c1  "; /* here you can paste the icon content from fontawesome, like word, excel, pdf,etc.. */
  font-family: fontawesome;
}

Answer 3

左、右填充行内元素。所以你可以这样做。

HTML

<a href="some.pdf" class="pdf" />View</a>

CSS

.pdf {padding-left:12px; background:url(pdf.png) no-repeat 2px 3px;}

请看这个例子。

Answer 4

如果你不反对脚本，你可以用jQuery做这样的事情

$("a[href$='.pdf']").addClass("pdf");
$("a[href$='.doc']").addClass("doc");
$("a[href$='.rtf']").addClass("doc");
$("a[href^='mailto:']").addClass("email");

和css

a.pdf {background: url(../images/icons/pdf_icon.png) no-repeat left center; 
padding-left: 20px; line-height: 16px;}

将图标放在句子/链接的前面。

Answer 5

我还会坚持使用CSS伪元素，这对于较旧的浏览器有很好的降级。使用IE <= v7的人不想看到漂亮的网站，你也可以通过阅读状态栏来识别链接的文件类型。

Answer 6

使用背景图像，用no-repeat定位到右侧，并在元素的右侧添加填充，等于图标的宽度(加上几个像素的间距)。

a.pdf {
    background: url(pdficon.png) no-repeat right center;
    padding-right: 18px; /*width of the space you want to leave for the icon*/
}