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