Font Awesome-为Bootstrap设计的图标字体

 <link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/font-awesome.min.css">

字体路径是相对于你的 CSS 目录的->../font

格式：<i class="icon-camera-retro"></i>

变大：通过应用 icon-large (增大 33%), icon-2x, icon-3x 或 icon-4x 样式让图标变得更大。

旋转：icon-spin 加入class即可（IE7-9不支持）

变淡：icon-muted

文字在图片左/右边:pull-left/pull-right

按钮：a标签，指定样式为按钮，里面是内容

<a class="btn" href="#">
<i class="icon-repeat"></i> Reload</a>

<a class="btn" href="#"><i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#"><i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
<a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

按钮组:

<div class="btn-group"><a class="btn" href="#"><i class="icon-align-left"></i></a>...
</div>

下拉菜单按钮：

<div class="btn-group "><a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a><a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a><ul class="dropdown-menu"><li><a href="#"><i class="icon-pencil"></i> Edit</a></li><li><a href="#"><i class="icon-trash"></i> Delete</a></li><li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li><li class="divider"></li><li><a href="#"><i class="i"></i> Make admin</a></li></ul>
</div>

列表：<ul>加class="icons"

<ul class="nav nav-list"><li><a href="#"><i class="icon-home"></i> Home</a></li><li class="active"><a href="#"><i class="icon-book"></i> Library</a></li><li><a href="#"><i class="icon-pencil"></i> Applications</a></li><li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
</ul>

PS:class="active"没生效

表单：

<form><div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span><input class="span2" type="text" placeholder="Email address"></div><div class="input-prepend"><span class="add-on"><i class="icon-key"></i></span><input class="span2" type="password" placeholder="Password"></div>
</form>

库

3.0 版本中新增的图标：

4.3的新图标：

3.0所有图标：http://www.bootcss.com/p/font-awesome/

最新：http://fortawesome.github.io/Font-Awesome/icons/

3.0需要的文件：下载

Font Awesome-为Bootstrap设计的图标字体相关推荐

15 个最好的 Bootstrap 设计工具推荐
Bootstrap 是由前Twitter设计师Mark Otto和Jacob Thornton开发的前端工具包,其提供了优雅的HTML和CSS规范.Bootstrap不单单是一个框架,更确切的说,它改 ...
如何灵活利用免费开源图标字体-IcoMoon篇——张鑫旭
一.温故知新之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系 ...
Bootstrap专用图标字体Font Awesome
Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦.CSS对字体可以设置的样式也同样能够运用到这些图标上了.本站的字体图标就使用了Font Awes ...
Font Awesome 完美的图标字体
好久没来,虽说鄙人的人气不咋地,但还是很想念自己这一亩二分田地. 近期用在平台开发中,看着设计师摆开阵势,准备大画图标,想着自己将会很KUBI拼凑css-sprite图片,接着写一大堆 class^= ...
Qt中使用Font Awesome图标字体库
一.简介 Font Awesome号称是为Bootstrap设计的完美图标字体,经常出现在各类网页中,非常流行. 官网: https://fontawesome.com/ 中文网: http://ww ...
Font Awesome 图标字体
Font Awesome 是为Bootstrap设计的什么是Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. Bootstrap 是基于 HTML.C ...
Bootstrap V5 图标字体的引入以及使用方法
目录图标字体使用方法一文件下载文件引用使用图标图标字体使用方法二文件下载文件引入使用图标图标字体使用方法一文件下载打开官网链接:Bootstrap v5 官网,点击图标库: 点击 ...
华丽的设计，20个免费的图标字体
旨在用作图标,符号和字形的字体的数目日益增加.使用图标字体你可以更换光栅图像转换成矢量的.这意味着您可以轻松调整你的图标字体,而不必担心质量损失.图标字体是添加图标到您的网站一个灵活的解决方案. 除了 ...
前端svg字体图标使用_材质设计图标字体与svg以及如何在角度中使用svg精灵
前端svg字体图标使用 In this article we will compare usage of Google's Material Design Icons, as font and SVG ...

Font Awesome-为Bootstrap设计的图标字体

库

Font Awesome-为Bootstrap设计的图标字体相关推荐

最新文章

热门文章