• Page 1 of 1
  • 1
用icomoon将icon转换为字体
使用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="#">&#xe00b;</a>


--------------------分割线--------------------

另一种则是在css里面写

Code
a:before {
      content: "\e010";
}


--------------------分割线--------------------

还有一种是只在html5中支持的写法

Code
a:before {
      content: attr(data-icon);
}


html里这样写

Code
<a title="music" href="#" data-icon="&#xe00b;"></a>
TIP:@font-face的路径可以是相对也可以是绝对,but you can not use http://asite.com/font.ttf on bsite.com
  • Page 1 of 1
  • 1
Search: