|
   |
| Forum » Wonder Study 寓教于乐 » Wonder Tool 实用工具分享 » 用icomoon将icon转换为字体 (Turn the icon into font via icomoon) |
| 用icomoon将icon转换为字体 |
Date Fr, 2013-07-19, 17:02 | Msg 1
 
使用icon是极好的有木有，细节美化了有木有，信息交互更形象了有木有。
传统使用icon的方法一般有两种： 一种是插img 一种是加入背景 但是—— 尺寸是固定的有木有，颜色不能变有木有，要改变尺寸或颜色，唯一的方式只有再做一个别的尺寸或颜色的icon 如果—— 是文字，要变尺寸可以改字号，要换颜色也可以有 多木方便有木有 其实—— 真的可以哦，只要将ico变成文字 大家先看看华丽的搜狗输入法 ♈♉♊♋♌♍♎♏♐♑♒♓ 其实打字是可以打出很多符号的，但是有时往往现有的符号不能满足我们对icon的需求肿木办乜 今天推荐大家一款ico字体生成工具icomoon，其实网上还有很多这样的工具，比如fontello icomoon 网址 > ico本身自己有近700个icon字 你可以从中选择你需要的，你也可以使用import icons上传自己做的icon哦（要.svg的，或者字体格式文件），全部选好之后，还可以设置将icon打出来的编码，弄好之后便可以生成了，生成下载下来，便可以使用了，使用方法如下： 首先在下下来的文件中找到名为font的文件夹，里面有几种字体文件，如果你要兼容所有browser，那么有四个要用到哦，分别是ttf, eot, svg, woff 在css中引入icon字体，代码如下 Code @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); } 再指定字体，比如给a标签用这个ico字 Code a { font-family:'icomoon' } 接着，便可以在页面中使用这种ico字了，怎么用呢，还记着那些编码吗？悲催忘记了也木有关系哦，在下载的文件夹中有个index.html，打开一看，能看到每个icon的编码，将ico写出来还有两种方式： 一种直接html里面写啦 Code <a title="music" href="#"></a> --------------------分割线-------------------- 另一种则是在css里面写 Code a:before { content: "\e010"; } --------------------分割线-------------------- 还有一种是只在html5中支持的写法 Code a:before { content: attr(data-icon); } html里这样写 Code <a title="music" href="#" data-icon=""></a>  |
Date Tu, 2013-12-31, 17:37 | Msg 2
TIP：@font-face的路径可以是相对也可以是绝对，but you can not use http://asite.com/font.ttf on bsite.com
|
| |||
| |||
