css3中的字体图标 iconfont的问题

html-css017

css3中的字体图标 iconfont的问题,第1张

去bootcss网站上下载一个看一下就明白了,让别人讲你自己也要了解下。

.icon-cart:before {

content: "\e623"

}

.icon-cart:after {

content: "\e623"

}

都可以

\e623 就是对应的你要插入的那个字体图标的编号

打开IcoMoon网站往往会给人一种错觉,误认为跟上面罗列的字体网站一样,就是展示。

其实非也,IcoMoon的水要深多了。

这么说吧:假设整个上海梅园地区有100家卖衣服的小店,其中有99家就是拿货然后卖衣服给顾客(这就是大搜罗的icon font们);但是,其中有一家店不仅卖衣服,还可以根据用户需求定制衣服,甚至还可以把别家店的衣服按照顾客要求进行改制,且适用于高矮胖瘦,古今中外给类人群,而且还有穿衣说明,模特试穿以及打包送货上门服务(这就是本文的IcoMoon),最最关键的是,这家店是免费的。

体现在IcoMoon上就是:提供600+字符,您可以根据自己需求定制(如就选两个);可以导入其他字体,也进行特别定制(类似fontforge功能);定制字体提供打包导出功能(省去了字体转换),兼容IE6+,现代浏览器以及各类手机设备,且有demo实例,并对字符进行了HTML转化。

可谓图标字体一条龙服务,又称“图标解决方案”!

三、使用流程、操作演示

进入主页,点击下图所示区域开始:

作为演示,我就选了三个图标,如下图所示:

插播:每个图标你都是可以自己进行标记的(移上去会看到Edit, 点击之),然后——

注:编辑框下面的Download会下载该图标svg格式的zip文件, Save Copy按钮则是上面新生成一个图标,而Save则是原来替换。

选择好你要的图标之后,点击页面下方黑色条条上面的f字样的图标按钮,生成字体:

然后你会看到下图所示画面:

剩下的就是点击下面的下载标识进行zip打包文件下载了:

您会得到icomoon*.zip的文件。例如,icomoon1512.zip,打开zip包,会看到里面有适合各个浏览器的字体以及demo演示:

然后,你就可以依葫芦画瓢使用这些图标形状字体了!