字体图标学习

简介: Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目 主要特色: ...

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目

主要特色

  •  一种字体,249个图标,是网页操作的象形语言;
  •  纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果;
  •  无限缩放,矢量图标在任何尺寸下都一模一样;
  •  免费使用,包括商业和非商业项目;
  •  支持 Internet Explorer 7 浏览器;
  •  能够在 Retina 屏幕完美呈现;
  •  完全兼容 Twitter Boostrap 最新版本;
  •  对设计师友好,设计师能够轻松使用;
  •  和其它图标字体不同,兼容屏幕阅读器

使用方法

  使用 CSS:

  1. 拷贝 Font Awesome 字体目录到项目中;
  2. 拷贝 font-awesome.min.css 文件到项目中;
  3. 修改 font-awesome.min.css 文件中的字体路径到正确的位置;
  4. 在页面的 head 里引入 font-awesome.min.css 文件:
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

  使用 LESS:

  1. 拷贝 Font Awesome 字体目录到你的项目中;
  2. 拷贝 font-awesome.less 文件到 bootstrap/less 目录。
  3. 打开 bootstrap.less 文件并替换 @import "sprites.less"; 为 @import "font-awesome.less";
  4. 编辑 elusive-webfont.less 文件的 @FontAwesomePath 变量为字体路径:
@FontAwesomePath:   "../font";

  然后重新进行 LESS 编译就可以了。

 

目录
相关文章
|
前端开发
CSS实战笔记(三) 滤镜效果
CSS实战笔记(三) 滤镜效果
95 0
|
前端开发
CSS实战笔记(一) 悬停效果
CSS实战笔记(一) 悬停效果
66 0
|
前端开发
CSS实战笔记(二) 几何图形
CSS实战笔记(二) 几何图形
74 0
|
前端开发 JavaScript
《css大法》之使用伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。
429 0
|
前端开发 Windows
JavaWeb学习之路(27)–CSS之字体样式
本文目录 1. 文本与字体区别 2. 字体类型 3. 字体风格 4. 字体粗细 5. 字体大小 5.1 使用像素单位 5.2 使用em单位 5.3 其他单位 6. 小结
254 0
|
前端开发 容器 Web App开发
如何用纯 CSS 创作锡纸撕开的文字效果
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/WgxbaZ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
997 0
|
前端开发 CDN
|
前端开发 iOS开发
字体图标制作的方法
web端和移动端为什么需要做字体图标? 性能好是最主要的原因,可以减少http请求。在之前项目中,网页的图标是用的图片,当图标很多时,http请求多,而且图片体积比较大。   字体图标制作流程 1设计师设计出图标保存为SVG格式的。
1587 0