您可以使用CSS属性选择器来完成此操作,而无需更改WP Admin或HTML中的任何内容。谷歌搜索"css file type icons" 得出了几个结果,但我将在这里为您解释基本想法。
属性选择器允许您使用匹配的属性设置任何html标记的样式。有many ways to use attribute selectors (input[type="text"]
, 有人吗?)但你需要抓住href
值,尤其是文件扩展名。例如,如果要在任何pdf文件之前添加pdf图标,可以执行以下操作:
a[href$=".pdf"] {
background:transparent url(../images/pdf-icon.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}
The
$
表示从字符串末尾开始匹配。这将适用于所有现代浏览器,甚至IE7。
如果您想变得更加别致,可以将所有图标放在一个图像文件中,然后使用背景定位来正确调整每个图标:
a[href$=".pdf"], a[href$=".doc"], a[href$=".zip"] {
background:transparent url(../images/pdf-icon.png) no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}
a[href$=".pdf"] { background-position: center 0; }
a[href$=".doc"] { background-position: center -20px; }
a[href$=".zip"] { background-position: center -40px; }
EDIT: (Thanks to @toscho!)
一个更有趣的技巧是将图标添加为
content: url(image.gif)
而不是背景图像。这样,您就可以控制高度;宽度,创建更紧凑的图标精灵图像,甚至可以做一些有趣的事情,比如使用图标字体。
a[href$=".pdf"]:before {
content: url(path/to/image);
// more styles //
}
看看
IcoMoon custom icon font creator (免费!)便于实施。