2017.4.7 图标库Font Awesome的使用

1.Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg 的文件格式中。这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小。

2.你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在你的 HTML 头部增加下列代码即可:

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

3.i 元素起初一般是让其它元素有斜体(italic)的功能,不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中,把它变成一个图标,比如:

<i class="fa fa-info-circle"></i>

你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中,方法是在i元素中增加 class 属性 fafa-thumbs-up

<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button>

4.使用 Font Awesome 分别为你的 info 按钮添加 info-circle 图标,为你的 delete 按钮添加 trash 图标

代码:

<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle">Info</i></button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash">Delete</i></button>
</div>

5.你还可以将 Bootstrap 的 col-xs-*用在 form元素中。这样的话,我们的单选按钮就可以均匀地在页面上展开,不需要知道屏幕的分辨率有多宽。

将页面中的两个单选按钮放置于一个 <div class="row"> 元素中。然后,添加 <div class="col-xs-6"> 元素并分别包裹每一个单选按钮。

代码:

<div class="row">
<div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
<div class="col-xs-6"><label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
</div>

6.你可以在你的 button 提交按钮上添加 Font Awesome的 fa-paper-plane 图标,方法是在元素中增加

<i class="fa fa-paper-plane"></i>

给你表单的文本输入框增加 classform-control

在你的表单提交按钮中增加 class btn btn-primary 。同样,在这个提交按钮中增加 Font Awesome 的 fa-paper-plane 图标。

代码:

<input type="text" class="form-control" placeholder="cat photo URL" required>
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane">Submit</i></button>

7.现在让我们把 input 元素和提交按钮 button放到同一行。我们将用和之前一样的方法:通过使用拥有 row class 属性的 div 元素和其它在它之内的具有 col-xs-* class 属性的 div 元素。

代码:

<div class="row">
<div class="col-xs-7"><input type="text" class="form-control" placeholder="cat photo URL" required></div>
<div class="col-xs-5"><button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div>
</div>

时间: 2024-10-08 19:34:56

2017.4.7 图标库Font Awesome的使用的相关文章

《Ext.net》处女作,本人也是处女座。吼吼(内容包括EXT自带图标库文件和Font Awesome图标库),笔记特别详细,适合刚刚自学的朋友。

完全处于自学啊,压力,不过好在有个asp.net的师傅.不过都数都是自己做,自己百度.程序员就应该多找度娘.能不麻烦别人就不要麻烦别人. 我自学的方式是:参考官网API.然后英文看不懂用有道翻译.然后多练习,结合项目一起做.最后才去问师傅. 官网API地址:http://examples.ext.net/ 参考学习资料地址:http://www.qeefee.com/article/extnet-learn-01-using-extnet-in-webform 这里面很详细,相信慢慢来一定能成为

Font Awesome 图标库

Font Awesome 是一个非常方便的图标库.这些图片都是矢量图,以 .svg 文件格式保存.这些图标用起来就像字体一样.你可以使用像素单位来指定他们的大小,它们会继承父级HTML元素的字体大小. 有很过可爱的小图标 <div class="row"> <div class="col-xs-4"> <button class="btn btn-block btn-primary"><i class=&

阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)

继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库),还支持自己上传,关键还能生成你项目专用的CDN,速度不言而喻,支持国产.下面引用介绍 转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具) 使用SVG来代替Web Iconfont(图形字体化) 从最开

Font Awesome(一套很棒的图标库)

Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小. 你可以将 Font Awesome 图标库增添至任何一个应用中,方法很简单,只需要在你的 HTML 头部增加下列代码即可: <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/fon

字体图标 Icon font

Icon font Icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: Icon Font的优缺点 大小可以自由地变化 颜色可以自由地修改 添加阴影效果 *IE6也可以支持 支持一些CSS3对文字的效果 字体文件比图片文件小很多 由于是字体,所以只可以显示纯色图片,不支持多种颜色的图片(缺点) 资源: 阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello 在线定制

如何合并两个图标库

http://blog.csdn.net/crystal6918/article/details/52994393 最近在项目中碰到了要合并两个icon库的需求:我们项目本来用的是bootstrap提供的glyphicons,但是现在需要用一个别的库的icon,想把这两个库合并在一起供项目使用,研究了一番后整理个教程吧~ 利用https://icomoon.io/app/#/select 这一工具进行这两种图标库的合并,操作步骤如下: 导入图标库 点击页面左上角的import icons,分别导

字体图标库使用方法

一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www.bootcss.com/p/cikonss/ 以第一个链接网站里的字体为例 选择自己需要图标,点击右下角下载下来 继续点击右下角--点击下载 然后下载的文件一般都是这几个基本部件 把fonts文件夹复制到自己的项目中根目录中 打开css文件 把代码复制到自己的某个css文件中,然后html引用,重点

阿里巴巴矢量图标库的使用

1,打开阿里巴巴矢量图标库 http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1 2,选择需要的图标加入购物车: 3,将购物车中的图标加入本地项目: 第一种方法: (1)获取在线链接,将获取到的在线链接复制到编辑器css文件: (2)<i class="iconfont">unicode<i/><i class="ico

Rails使用图标库技巧

网页中经常需要使用一些小图标,这里我们想使用Font Awesome这个图标库里的图标,我们可以到rubygems.org查看是否有人将该图标库封装成gem使得我们使用更加敏捷 在rubugems搜索结果如下: 然后在结果页面点击"源代码": 来到源代码的github页面,我们按照Readme来操作: 然后执行命令bundle 进行安装(执行bundle install也一样) 安装完gem要重启服务器 ? 要引用该gem还得在application.css中添加引用如下: ( 如果不