Iconize:给不同的网页文本链接添加不同的图标

想不想给你的日志中出现的不同后缀名的文本链接添加一个醒目的图标?

并且完全使用CSS来实现，不需要任何Javascript.

Iconize就是这样一个工具，实际上应该说是一种CSS的应用技巧，它可以为每种不同的文本链接添加不同的图标。比如，为Youtube的视频链接添加一个图标，为Flickr的图片链接添加另一个图标。

Iconize:给网页文本链接添加不同的图标

要使用它非常简单，你可以点击这里下载。里面包含一个icon图标的文件夹icons和一个样式文件iconize.css，你只需要把它们上传到你的服务器，再引用就可以了。举个例子，我上传icons和iconize.css到我博客的根目录下面，得到http://parandroid.com/iconize.css和http://parandroid.com/icons，然后，在网页的<head>和</head>标签之前加入下面的代码:

<link rel=”stylesheet” href=”http://parandroid.com/iconize.css” type=”text/css” media=”screen” />

这样就搞定了。 我打开css文件看了一下，下面是截图。从CSS的写法上可以看出来，这是利用链接网址中出现的字符配置不同的背景图片来实现的。

Iconize:给不同的网页文本链接添加不同的图标

也就是说，你可以根据你自己的情况，为不同的链接设置各种不同的样式。比如，你可以为带wordpress.org的链接，都配上一个Wordpress的Logo图标，为出现Digg.com的链接都配上一个digg图标。这样挺酷的。呵呵。

标签: , ,

作者: paran

链接: Iconize:给不同的网页文本链接添加不同的图标

本站所有文章，除特别标明外，皆为原创。如需转载，请复制粘贴下面的代码到文章底部.

转载自 <a href="http://parandroid.com/iconize-to-different-pages-with-different-text-link-icon/" title="Iconize:给不同的网页文本链接添加不同的图标" rel="bookmark">Iconize:给不同的网页文本链接添加不同的图标 | 帕兰映像</a>