字体图标学习

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 编译就可以了。

时间: 2024-10-12 19:43:14

字体图标学习的相关文章

Web学习笔记_04_font-awesome字体图标

使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页上轻松地添加图标.由于使用的是字体图标,所以利用文本相关的标签引用,并且放大不会失真.但是和字体不一样的是,如果用<i>标签或者<b>标签等引用的时候,并不会有斜体或者粗体的效果,但是<u>标签却有下划线的效果.在font-awesome官网上找到icon的名字,在引用的元

如何使用iconfont字体图标代替网页图片?

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

svg图片转换为WEB字体图标

今天我学会了使用字体制作网站   icomoon.io 制作web文本图标.跟我一起学习吧! (1)字体制作网站   icomoon.io   点击 icomoon APP  --->  import icons 导入文件入口 (2)SVG下载网站   iconsvg.com 专门下载svg图标 具体案例: 将SVG图标转换为字体文件,并可以应用到网页中. 一.下载svg   二.将svg文件转换为字体文件 三.字体图标的使用  显示效果

合并字体图标

1:http://iconfont.cn (阿里) 或是 2:http://www.fontawesome.com.cn/(awesome) 把项目的已经下载的,由于项目需要不断增加,不想用雪碧图 ,那么要把字体图标合并在一起而又不影响呢? 难道把在阿里的里的项目合并在一起再重新下载,可是还有些是从其他的获取的图标那怎么办???为了易管理,合并同一起是最适合的! 在网上寻找了,很久参考各精英的分享博客,学习到在  https://icomoon.io/ 可以把 .svg 文件合并 在输出 合并好

WPF自定义控件与样式(1)-矢量字体图标(iconfont)

一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便,推荐 阿里巴巴开源字体: 字体文件非常小,比使用png等图片文件

[Phonegap+Sencha Touch] 移动开发43 WebApp字体图标的制作

Sencha touch从2.2开始,里面用到的图标全部是字体图标(icon font),也就是字体文件里面的字符作为图标来用. 主要特性 字体是矢量的,使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小而不失真,适用于不同分辨率和尺寸的屏幕 自由的修改颜色 添加阴影效果 支持图片图标的其它属性,例如,透明度和旋转等等 可以添加text-stroke和background-clip:text等属性,只要浏览器支持 字体图标的用法 我们来看下sencha to

CSS字体图标

字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真. 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的.此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦.. 这就是字体图标(iconfont). 字体图标优点  可以做出跟图片一样可以做的事情,改变透明度.旋转度,等.. 

Bootstrap入门(七)组件1:字体图标

包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类和对应每个图标的类.把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格. 注意: 1.不要和其他组件混合使用 图标类不能和其它组件直接联合使用.它们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上. 2

Chrome 对于 glyphicon 字体图标不显示的解决的方法

在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到 ?custom.css 文件,路径为: C:\Users\(username)\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 改动或添加内容为: .glyphicon {font-family: 'Glyphicons Halflings' !important;} /* For Glyphicons *