在网页设计中使用图标字体（icon font）是件挺有新意的事情，使用图标字体能我们带来了一定的方便，比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等，这些都是很不错的。
流行的在线字体定制网站有Fontello和icomoon，这两个在线工具都很不错的，内置的图标也非常的多
打开icoMoon APP字体定制页面，然后你会看到几百个常用图标，这里不建议全选，选几个你需要的就可以了，然后点击底部的“Font”按钮 –> 点击“Download”即可下载字体

喜欢自己原创，当然也是可以滴，准备工具：Fontlab、Adobe Illustrator。

1. Fontlab:
直接在Fontlab上制作图标字体，完成后点击Fire(文件) –> Export(导出) –> EPS格式。

2. AI:
打开刚刚导出的EPS，另存为SVG格式。

3.iconMoon APP
在icoMoon APP页面点击import Icons按钮，支持多选，然后按上文的方法下载使用即可！

Tips: Fontlab和AI这两个工具的路径是可以相互复制的哦，所以我们用AI来制作ICON方便一些，制作完再复制到Fontlab上，需要注意的是在AI里面的路径画大一点再复制到Fontlab里，否则容易变形。

 
 
http://sc.chinaz.com/info/130228237055.htm 这个地址是简介地址

https://icomoon.io/app/#/select  图标制作地址

iocfont 网页图标字体以及使用方法的更多相关文章

  1. Web字体工具整理，网页图标字体以及使用方法整理

    常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...

  2. ExtJs5_使用图标字体来美化按钮

    sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...

  3. 5、手把手教你Extjs5(五)使用图标字体来美化按钮)

    sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...

  4. CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  5. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  6. 老爷车IE8如何兼容图标字体

    前言 首先这个标题再详细的说就是如何解决font-face在IE8下间歇性出现图标字体渲染失败的解决方案. 如果你还不知道什么是图标字体,可以先阅读:链接1,链接2,链接3 先看在IE8下的问题: 而 ...

  7. 图标字体的使用(fontello.com)字体推荐及使用技巧

    网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启 ...

  8. (转载)app ico图标字体制作

    图标字体化浅谈   在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...

  9. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

随机推荐

  1. include子页面传递过来的参数传递到后台

    在页面上可以使用 ${param.moduleId}来获取 在判断中也可以使用${param.moduleId == "test" ? "1":"2& ...

  2. compass的使用

    compass常用的一些命令 compass create 创建新Compass项目 compass init  为已存在项目添加compass compass clean 移动已生成的文件和缓存 c ...

  3. JavaScript对象属性 constructor

     对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...

  4. (转)使用Microsoft Web Application Stress Tool对web进行压力测试

    http://www.blogjava.net/crespochen/archive/2009/06/02/279538.html Web压力测试是目前比较流行的话题,利用Web压力测试可以有效地测试 ...

  5. arraylist的使用

    ArraylistDemo package cn.stat.p6.arraylist.demo; import java.util.ArrayList; import java.util.Iterat ...

  6. 第1章 网络编程基础(3)——基本Socket通信

    服务器常用模型

  7. linux一些常用指令整理

    set number:设置行号 set list:区分tab和空格 按w:一个字一个字跳转 按b:一个字一个字回跳 shift+6:行首 shift+4:行尾 ctrl+v:选中块,再按shift+i ...

  8. github 推送时can't be established.

    http://www.xuebuyuan.com/2095099.html 飞凡@FANZ /e/learngit (master)$ git push origin masterThe authen ...

  9. Mediawiki.org的PHP编码约定

    http://www.mediawiki.org/wiki/Manual:Coding_conventions/PHP assignment作为expression来用看起来像个错误(looks su ...

  10. 【Beta】Scrum10

    Info 最后一次Scrum会议(补发) 时间:2017.01.03 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:-- Task Report Nam ...