5

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

我建议使用 CSS，在 :after 上放置一个类并使用 :after 创建一个元素。

我记得IE6和IE7不支持伪CSS类，但除此之外，还有更好的做法吗？

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

4

6 回答 6

6

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

但是，您可以通过在链接中添加一些额外的填充并输入背景图像来做到这一点，并且您也不需要添加类，因为您可以使用子字符串属性选择器通过其扩展名选择（定位）链接。 .

例如

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;
}

查看此页面以获取更多说明

于 2011-07-06T21:03:42.697 回答
2

使用 CSS3 为每个链接带来 pdf 或其他图标的简单方法：

1. 图标通过背景图片 -> CSS 代码：

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

2. 从 FontAwesome -> CSS 代码中引入图标：

a[href$=".pdf"]:before
{
  content:"\f1c1  "; /* here you can paste the icon content from fontawesome, like word, excel, pdf,etc.. */
  font-family: fontawesome;
}
于 2016-07-26T10:47:32.013 回答
1

内联元素的左右填充工作。所以你可以做类似...

HTML

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

CSS

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

请参阅此示例。

于 2011-07-06T21:00:49.387 回答
1

如果你不反对脚本，你可以用 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;}

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

于 2011-07-06T21:19:32.840 回答
0

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

于 2011-07-06T20:55:42.253 回答
0

使用背景图像，使用 定位在右侧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*/
}
于 2011-07-06T21:24:56.130 回答