页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

Font Awesome精心打造的矢量字体图标(推荐)

图标设计 html5 HTML我帮您 1年前  次浏览
Font Awesome为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。 Font Awesome精心打造的矢量字体图标 主要特色: 一种字体,439个图标,是网页操作的象形语言; 纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果; 无限缩放,矢量图标在任何尺寸下都一模一样; 免费使用,包括商业和非商业项目; 支持 Internet Explorer 7 浏览器; 能够在 Retina 屏幕完美呈现; 完全兼容 Twitter Boostrap 最新版本; 对设计师友好,设计师能够轻松使用; 和其它图标字体不同,兼容屏幕阅读器; 使用方法 方式一: 此方法使用最为简单,BootstrapCDN 方式 在自己网页的head标签中引入如下代码即可,不需要下载和安装任何东西即可使用:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
方式二: 此方式需要下载 Font Awesome项目文件夹 将Font Awesome 目录 拷贝到你的项目中,然后在head标签中引入如下代码:
<link rel="stylesheet" href=" your project(你的项目路径)/font-awesome/css/font-awesome.min.css">
使用举例
<div class="list-group">
  <a class="list-group-item" href="http://www.html580.com"><i class="fa fa-home fa-fw"></i>&nbsp; 首页</a>
  <a class="list-group-item" href="http://www.html580.com/page"><i class="fa fa-book fa-fw"></i>&nbsp; JQUERY插件库</a>
  <a class="list-group-item" href="http://www.html580.com/code"><i class="fa fa-pencil fa-fw"></i>&nbsp; 网站源码</a>
  <a class="list-group-item" href="http://www.html580.com/tools"><i class="fa fa-cog fa-fw"></i>&nbsp; 工具</a>
</div>
输出显示:

相关链接

发表评论