Question

我有使用php的文件上传功能，然后我需要提供这些文件的链接来下载它们。目前我刚刚给出了一个超链接，例如：

<a href="/files/testbook.pdf"> Text Book </a>

但这只是显示一个链接..而是需要显示一个pdf文件图标。我怎么能这样做？

Answer 1

在线搜索PDF图标，然后下载

<a href=file.pdf><img src=pdficon.jpg> test book</a>

Answer 2

您可以使用以下内容：

<a href="/files/testbook.pdf"> <img src="path_to_image" alt="Textbook"/> </a>

它将图像显示为链接。单击图像时，浏览器将开始下载PDF或在浏览器中显示PDF。

Answer 3

您可以使用css选择器选择指向pdf文件的所有链接并动态应用图标。这意味着您无需为所有链接添加单独的img标记。您可以为不同的文件类型添加其他选择器，或者为外部和内部链接等添加其他选择器。

您的CSS中的示例如下：

a[href$='.pdf'] {    
    display:inline-block;    
    line-height:18px; /* check your icon height */    
    padding-right:20px;    
    background: transparent url(images/pdf.png)  center right no-repeat;    
}     
/* change padding-right to padding left and background 
position center right to center left 
if you want  to display icon on the left side */

此有用的代码取自http://www.vision.to/add-a-small-icon-to-your-links-css-only.php

这里有关于这个主题的有趣读物http://www.portent.com/blog/design-dev/class-up-your-link-icons-with.htm

Answer 4

你可以用CSS做得更好。我还建议使用target属性强制链接在新选项卡中打开，这样，当单击外部链接时，站点访问者不会离开您的站点（在这种情况下，外部用于所有意图和目的......）

<a id="pdf-link" target="_BLANK" href="/files/testbook.pdf"> Text Book </a>

a#pdf-link {
    background: url('../images/pdf-icon.png') left center no-repeat;
    display: block;
    min-height: <USE-IMAGE-HEIGHT>px;
    padding-left: <USE-IMAGE-WIDTH-PLUS10/20>px;
}

Answer 5

正如@Jocelyn在评论中所说，你需要使用标签img来显示图像：

<a href="/files/testbook.pdf"><img src="/path/to_your_image.png" alt="Text Book"/> Text Book </a>

我建议您检查文件类型，然后输入正确的图像（PDF，ZIP，DOC ...），您可以使用以下方法执行此操作：

<?php
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, 'YOUR_FILENAME');

然后根据允许的mime类型进行切换或if..else。

需要在html中显示文件图标而不是链接

5 个答案: