很早以前在Google Plus UI Button制作一文中详细介绍了Google Plus的UI按钮制作方法以及相关代码，今天藤藤特意将其中tip的提示按钮UI制作方法单独拿出来培析，与大家分享，希望大家喜欢这套由@font-face制作的TIP按钮库。

大家好久没有看到藤藤的每日一练了吧，会不会觉得少了什么？难道藤藤同学不写案例了吗？不是的，因为最近我和藤藤一起在整理ICON　UI的库，希望这些UI的库能帮助大家解决一些ICON的制作时间，做到拿来就可以用。这些ICON　UI我们都是使用字体来制作的，用到的就是ＣＳＳ３的＠font-face属性，制作方法简单。只是类名和实体符的对应，大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature　Symbols，希望大家喜欢。

经过一段时间的整理，Iconmoon Icon UI整理出来了，这个ICON UI总共具有316个不同的图标，所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似，如果你是初次接触，建议你先点击这里，阅读相关的文章。你会懂的。如果你知道是怎么一回事，那就继续往下吧，直接先浏览有什么样的图标，而且所有的图标，我们都配上了类名，使用时类名查询，就OK了。

站上放了好几个ICON UI，这些ICON UI其实没有特别之处，从效果上看，但他们具有一个共同点，都是使用@font-face来实现这些ICON的效果，而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子，藤藤给大家整理了一份163个Entypo ICON效果，希望大家喜欢，并能在项目中使用上。

关于@font-face制作ICON的技巧不在是技巧了，最主要的关键是如何得到这些icon的svg等字体文件，今天藤藤为大家整理了另外一个字体库“iconic”，这个字体库包含了172个常用的ICONl图标，希望大家喜欢。至于怎么制作，就不用我说了，因为站上这方面的案例和实现方法已经介绍很多篇了，如果你是第一次接触，你可以在搜索框中搜索“icon”，这样在w3cplus会给你呈现出你需要的icon制作方法教程与相关案例。那么到今天为止，藤藤在w3cplus上为大家共提供了五份有关于字体制作 icon图标的案例，有兴趣的围观吧。

这个ICON库工程真是浩大，其实藤藤整理出来是350个ICON，可是被我弄丢了五个，找不回来了，真是罪过罪过呀，实在找不回来的情况之下，我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成，可以说，你需要的ICON图标都基本上全了，有生活的、有工业的、有技术的等等，不信你自己看看。我是信了。(^_^)，制作方法是不用了说，主要是大家苦于没有这样的字体库，那么现在我们给大家提供了，需要的就直接下载吧，不过转载的话，注明一下来源哟，别让我们辛苦过后一点余香都没了。