添加图标链接中

这一个页面上的链接，以显示多个文件类型是here一个页面，显示与文件类型显示图标。我的问题是存在具有相同名称的文件，但文件扩展名不同。一个是CSV文件，另一个是excel文件。见下面的例子：到2017年

变化食品价格指数，2015年（XLS文件）
变化食品价格指数，2015年到2017年（CSV文件）

我想只显示一个标题和有图标链接的文件扩展名。

变化食品价格指数，2015年到2017年（XLS文件图标，CSV图标）

这里是我的CSS

span.file a{ 
display:block; 
padding: 1px 0px; 
} 

span.file a[href*='.pdf'] &[href*='.PDF'] { 
background-image: url(/css/images/pdf.gif); 
background-repeat: no-repeat; 
background-position: right center; 
padding-right: 23px; 
} 
span.file a[href*='.zip'] &[href*='.ZIP'] { 
background-image: url(/css/images/zip.gif); 
background-repeat: no-repeat; 
background-position: right center; 
padding-right: 23px; 
}  
span.file a[href*='.doc'] &[href*='.DOC'] { 
background-image: url(/css/images/word.gif); 
background-repeat: no-repeat; 
background-position: right center; 
padding-right: 23px; 
} 
span.file a[href*='.xls'] &[href*='.XLS'] { 
background-image: url(/css/images/xls.gif); 
background-repeat: no-repeat; 
background-position: right center; 
padding-right: 23px; 
} 

span.file a[href*='.csv'] &[href*='.CSV'] { 
background-image: url(/css/images/CSV.png); 
background-repeat: no-repeat; 
background-position: right center; 
padding-right: 23px; 
}

来源

2017-07-12 WebGirl

你想要的图标是下载的链接或者你只是想多个图标，无需添加额外的HTML？ – MyStream

优先下载链接。 – WebGirl

在您的参考链接上，您有1个背景图片偏移链接。如果您可以将其更改为标题（即使它仍然是链接）和其他2个链接，那么您可以只使用实时链接中的图标，但将链接设置为显示：inline-block;设置overflow：hidden属性并将text-indent设置为负值，例如-300px;然后你可以重用你的CSS类来设置背景。这会让你更接近吗？ - 不要忘记设置内联块图标链接的高度和宽度。 – MyStream

如果你的URL看起来像这样：

<a href="/file.xlsx?v=123">Link Title</a> <a href="/file.xlsx?v=123" class="xlsx">Download XLS</a> <a href="/file.csv?v=123" class="csv">Download CSV</a>

然后你可以像这样使用CSS来概括图标：

.csv, .xlsx { 
    display  : inline-block; 
    height  : 16px; 
    width  : 16px; 
    overflow : hidden; 
    text-indent : -32px; 
    position : relative; 
    background : none scroll no-repeat left top transparent; 
}

，然后自定义每个背景：

.csv { 
    background-image: url(/icons/csv.png); 
} 
.xlsx { 
    background-image: url(/icons/xlsx.png); 
}

来源

2017-07-12 23:16:19 MyStream

添加图标链接中

回答

相关问题