css - 链接 PDF(带图标)的最佳方法是什么？

Question

就语义、可访问性、可用性和 SEO 而言，在页面上链接 PDF(带图标)的首选方法是什么？

例如

• 这是PDF“01ccc5.pdf”的名称但在 PDF 中，这是标题PDF "如何在长 PDF 中搜索"我应该使用 PDF 主题作为文件吗名称如“如何在长 PDF 中搜索？
• 我想将 PDF 链接显示为页面上的PDF图标，是什么就可访问性而言的最佳方式和可用性。
• 我应该将 pdf 图标作为在里面或者我应该用作 css背景？

---

哪种方法更好？这个

a{text-indent:-99999px}

<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF 
<img src=pdf-icon.jpg" alt="How to search in long PDF" />
</a> 

---

或者这个

  a{text-indent:-99999px;background:url(pdf-icon.jpg);width:32px:height:32px}

或者这个方法http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF </a> 

我必须链接多个 PDF

---

注意:

PDF 的标题也将在 PDF 之前可用，但没有任何链接

像这样:

Title                                      PDF

How to search in long PDF                  PDF icon (with link of PDF)

How to search in long PDF                  PDF icon (with link of PDF)

How to search in long PDF                  PDF icon (with link of PDF)

Answer 1

使用 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  ";
  font-family: fontawesome;
}