Iconfont - Font Awesome - 基础 - H-ui前端框架官方网站
 &基础&图标
小白补脑：
首先，我们先恶补下什么是字体图标：用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。
加载文件体积小
统一展示风格，使用方法
通过font-size，color就能自由变化大小，修改颜色，就像控制文字一样简单
可以添加一些视觉效果如：阴影、旋转、透明度
后期维护成本很低
制作门槛有点高，需要借助专业的工具生成字库文件
需要服务器做些相应的配置来解决识别问题和跨域问题
H-ui整合了两家相对比较权威的字体图标：阿里巴巴Iconfont 和 Font Awesome
字体图标的使用方法：
第一步：下载（如果下载过H-ui框架的，请跳过第一步，无须重复下载）
第二步：引入
为了方便资源调用，尽量将.css 和字库文件放在一个文件夹下，不要随意拆开部署，防止无法正常加载字体文件。
Iconfont&link href=&lib/iconfont/iconfont.css& rel=&stylesheet& type=&text/css& /&
Font Awesome&link href=&lib/font-awesome/font-awesome.min.css& rel=&stylesheet& type=&text/css& /&
&!--[if IE 7]&&link href=&lib/font-awesome/font-awesome-ie7.min.css& rel=&stylesheet& type=&text/css& /&&![endif]--&
第三步：调用
有两种使用方法
方法1、挑选相应图标并获取字体编码(如果字库发生过更新，编码会发生相应的变化，需要重新获取对应编码)，应用于页面。󰀠&i class=&iconfont&&󰀠&/i&
方法2、通过对应的css类名调用&i class=&iconfont iconfont-yunshangchuan&&&/i&
阿里巴巴IconfontFont Awesome3.0
阿里巴巴Iconfont平台不广免费提供了1000多个常用的图标，为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台，平台将会将图标存储在平台上，并转换成多种格式文件。具体制作方法在此不做过多阐述，感兴趣可
.yunshangchuan
.shangchuan
.shangchuan1
消费者保障
.xiaofeizhebaozhang
.xinshoushanglu
.fukuanfangshi
.dianzishu
.jiangefuhao
.yangshengqi
.dianhuaji
.xingguang
.duihuakuang
.pingbandiannao
.xianshiqi
.zhaoxiangji
.danfanxiangji
.dianshiji
.renzhengyonghu
.bianjiwenjian
.dengdaiwenjian
.shanchuwenjian
.jianqiewenjian
.fuzhiwenjian
.sousuowenjian
.wenjianjia
新增文件夹
.xinzengwenjianjia
删除文件夹
.shanchuwenjianjia
未打卡的文件夹
.weidaqiadewenjianjia
.wangzhanzhu
.shuzhuangtu
.zhexiantu
.dingxiang
.jingquedingxiang
.guanggaozhu
.nanshangjia
.nvshangjia
.tianjiashangjia
.xingqudingxiang
.tianjiajihua
.guanggaowei
添加广告位
.tianjiaguanggaowei
.shoujidianzhao
.shangjiaqun
.tuwendianzhao
.biaoshengbang
.guanliyuan
.jinbizhuanchu
.jinbitixian
.jinbizhuanru
.yemiantuiguang
广告主活动推广
.guanggaozhuhuodongtuiguang
.xinshouxuetang
.shangchuansucai
.qudaoxiaoguo
.qudaoguanli
推广单元格
.tuiguangdanyuange
.xitongtuisong
.tuiguangqudao
.zizhutuiguang
.jihuabaobiao
竞价资源位
.jingjiaziyuanwei
定价资源位
.dingjiaziyuanwei
.zhanghubaobiao
.wangzhanshezhi
跟踪目标设置
.genzongmubiaoshezhi
.wangzhanguanli
跟踪目标管理
.genzongmubiaoguanli
.biaoqian1
.yunxiazai
.heimingdan
.zhanghumingxi
淘宝客推广
.taobaoketuiguang
推广广告位
.tuiguangguanggaowei
全网竞价报表
.quanwangjingjiabaobiao
.xiangshang
.xiaoliang
.tianjiayonghu
.chazhaoyonghu
.xiaozhushou
.biaoqian2
.zhengque1
.zhaoxiangji1
.wenbenshuru
.xiaosuolvetu
.suijiyonghu
.dantupailie
.daliebiao
大缩略图列表
.dasuolvetuliebiao
.bianjimoban
.tixingshezhi
.daoruchuangyi
.xiangyou1
.xiangzuo1
.xiangshang1
.juhuasuan
.gouwucheman
.gouwuchekong
.yingyongzhongxin
.yousuojin
.chuizhisuofang
.huangguan
.zuosuojin
.shuipingsuofang
.zuishangbu
.dakaixinxi
.yingyongzhongxin1
.wenbenshuru1
.tuwenxiangqing
.gaoqingshexiang
.zipaimoshi
.xiangshang2
.xiangxia1
.xiangzuo2
.xiangyou2
.xinlangweibo
.tengxunweibo
.hebingdanyuan
.xinjianchuangkou
新窗口打开
.xinchuangkoudakai
.chongdian
.daimawenjian
.rilikaishi
.rilijieshu
.shangchuan2
.xiangyou3
.pipeifangshi
.xiangshang3
.xiangxia2
.weixuanzhong
.xuanzhong
.jihualiebiao
.xiugaichujia
.tuiguangzhong
.guanjianci
.qushixiajiang
.chongzhi1
.shoucang1
.jiagequxian
.quxianshangsheng
.dingxiang1
.dianyingpiao
.xinjianmokuai
.anonymous-iconfont
.zhitongche
.huangguan1
.morenchujia
.dianyingpiao1
.taobaotese
温馨提醒：还不知道是个什么玩意的小伙伴可以移步到这里 ，一窥究竟！再次H-ui不做陈述，官方描述更加权威！
适合 Web 应用的图标
icon-adjust
icon-asterisk
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-bell-alt
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-bullhorn
icon-calendar
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-check-empty
icon-circle
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-coffee
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-credit-card
icon-dashboard
icon-desktop
icon-download
icon-download-alt
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-external-link
icon-eye-close
icon-eye-open
icon-facetime-video
icon-fighter-jet
icon-filter
icon-folder-close
icon-folder-open
icon-folder-close-alt
icon-folder-open-alt
icon-glass
icon-globe
icon-group
icon-headphones
icon-heart
icon-heart-empty
icon-inbox
icon-info-sign
icon-laptop
icon-legal
icon-lemon
icon-lightbulb
icon-unlock
icon-magic
icon-magnet
icon-map-marker
icon-minus
icon-minus-sign
icon-mobile-phone
icon-money
icon-music
icon-ok-circle
icon-ok-sign
icon-pencil
icon-picture
icon-plane
icon-plus-sign
icon-print
icon-pushpin
icon-qrcode
icon-question-sign
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-reply
icon-resize-horizontal
icon-resize-vertical
icon-retweet
icon-screenshot
icon-search
icon-share
icon-share-alt
icon-shopping-cart
icon-signal
icon-signin
icon-signout
icon-sitemap
icon-sort-down
icon-sort-up
icon-spinner
icon-star-empty
icon-star-half
icon-tablet
icon-tasks
icon-thumbs-down
icon-thumbs-up
icon-trash
icon-trophy
icon-truck
icon-umbrella
icon-upload
icon-upload-alt
icon-user-md
icon-volume-off
icon-volume-down
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out
文本编辑器图标
icon-file-alt
icon-paste
icon-repeat
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-indent-left
icon-indent-right
icon-italic
icon-strikethrough
icon-underline
icon-paper-clip
icon-columns
icon-table
icon-th-large
icon-th-list
icon-list-ol
icon-list-ul
icon-list-alt
指示方向的图标
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-circle
icon-circle-blank
视频播放器图标
icon-play-circle
icon-pause
icon-step-backward
icon-fast-backward
icon-backward
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-fullscreen
icon-resize-full
icon-resize-small
icon-phone
icon-phone-sign
icon-facebook
icon-facebook-sign
icon-twitter
icon-twitter-sign
icon-github
icon-github-alt
icon-github-sign
icon-linkedin
icon-linkedin-sign
icon-pinterest
icon-pinterest-sign
icon-google-plus
icon-google-plus-sign
icon-sign-blank
icon-ambulance
icon-beaker
icon-h-sign
icon-hospital
icon-medkit
icon-plus-sign-alt
icon-stethoscope
icon-user-md
HTML代码&i class=&icon-h-sign&&&/i&开始使用Font Awesome字体图标 - Font Awesome
& 开始使用
简单的介绍如何将Font Awesome 3.2.1应用到你的网站！
只需要两行代码就可以将Font Awesome应用到你的网站上，或者你可以使用LESS来定制你的样式！更重要的是Font Awesome在上非常友好！
用两行代码添加Font Awesome + Bootstrap到你的网站。你甚至不用下载或者安装任何东西！
复制下面这两行代码到你的网站 &head& 标签中。
&link href=&///twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css& rel=&stylesheet&&
&link href=&///font-awesome/3.2.1/css/font-awesome.css& rel=&stylesheet&&
Pat yourself on the back for your scalable-vector-icons-on-the-website
in two lines of code.
开始使用Font Awesome!
使用这个方法获取font awesome到你的Bootstrap中.
复制 font-awesome 文件到你的项目目录中.
在 &head& 头部应用你的 font-awesome.min.css 路径.
&link rel=&stylesheet& href=&path/to/bootstrap/css/bootstrap.min.css&&
&link rel=&stylesheet& href=&path/to/font-awesome/css/font-awesome.min.css&&
开始使用Font Awesome!
使用LESS这种方法来自定义你的Font Awesome和Bootstrap.
复制 font-awesome 目录到你的项目目录中.
打开你的项目 bootstrap/bootstrap.less 并替换
@import &sprites.less&;
@import &path/to/font-awesome/less/font-awesome.less&;
打开你的项目 font-awesome/variables.less 并编辑 @FontAwesomePath 变量指向你的字体目录。
@FontAwesomePath:
&../font&;
Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
开始使用Font Awesome!
Font Awesome 同样能够正常使用.
复制 font-awesome目录到你的项目中.
按照下面的路径并去掉你的Bootstrap目录
打开你项目的font-awesome.less 或者 font-awesome.min.css 并编辑字体位置到你的目录(see above examples).
开始使用Font Awesome!
Font Awesome支持IE7.
保证Font Awesome在现代浏览器中能够正常使用.
复制一份 font-awesome-ie7.min.css 到你的项目中.
在头部 &head& 参考你字体路径添加 font-awesome-ie7.min.css.
&link rel=&stylesheet& href=&path/to/bootstrap/css/bootstrap.min.css&&
&link rel=&stylesheet& href=&path/to/font-awesome/css/font-awesome.min.css&&
&!--[if IE 7]&
&link rel=&stylesheet& href=&path/to/font-awesome/css/font-awesome-ie7.min.css&&
&![endif]--&
去向需要你兼容IE7的家伙抱怨吧。。.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&Font Awesome中动态图标字体是怎样实现的？
按投票排序
你是说的转的那个效果吧?是通过CSS3的动画实现的, 关键的CSS项是以下几个:-webkit-animation-delay: 0s;
-webkit-animation-direction:
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode:
-webkit-animation-iteration-count:
-webkit-animation-name:
-webkit-animation-timing-function:
-webkit-font-smoothing:
特别是wekit-animation-name: spin, 指定了是旋转.不支持IE10以前的版本.
这就是全部的教程，看起来很简单，喜欢的朋友可以试试下吧，现在交互越来越重视，给图标加上对应的动画可以增加一些用户体验，是很不错的。
Font Awesome 在 firefox中显示会出现乱码。 使用时需谨慎。
旋转是一方面，还有一个问题就是如何显示图标，图标不是图片，而是字体。webfont技术-iconic font，
去这个网站下个源码包，就可以把图标字体应用到你的网页上了，再用旋转css就可以做出一模一样的效果
已有帐号？
无法登录？
社交帐号登录}