t |
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
3 | -6 | -9 | -
A | -B | -C | -
---|---|---|
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
3 | -6 | -9 | -
1 | -2 | -3 | -
---|---|---|
1 | -2 | -3 | -
1 | -2 | -3 | -
1 | -2 | -3 | -
3 | -6 | -9 | -
1 | -2 | -3 | -
---|---|---|
1 and 2 | -3 | -|
1 | -2 | -3 | -
1 | -3 | -|
2 and 3 | -
1 | -2 | -3 | -
---|---|---|
1 and 2 | -3 | -|
1 | -2 | -3 | -
1 | -3 | -|
2 and 3 | -
Test | -||||||||
---|---|---|---|---|---|---|---|---|
-
|
-
1 | -2 | -3 | -
---|---|---|
1 and 2 | -3 | -|
1 | -2 | -3 | -
1 | -3 | -|
2 and 3 | -
Inputs should not extend past the light red background, set on their parent, a .span*
column.
Inputs should not extend past the light red background, set on their parent, a .span*
column.
I'm in Section 1.
- -I'm in Section 1.1.
-I'm in Section 1.2.
-I'm in Section 1.3.
-Howdy, I'm in Section 2.
-What up girl, this is Section 3.
-Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. Fusce .class-name
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. - | -
-
-
-
-
-
-
- |
-
This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
- -This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
- -This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
- -- Install FontAwesome.otf on your system. - Then, copy and paste any of these icons to use them in your mockups & designs. -
- -The iconic font designed for
use with Twitter Bootstrap
- You asked, Font Awesome delivers with 40 shiny new icons in version 3.0. New icons can be requested on the - Font Awesome GitHub project. Or even - better, you can contribute your own icons. -
-It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.
-Use this method to integrate Font Awesome with the default Bootstrap CSS.
-The font path is relative from your CSS directory.
-<head>
of your html, reference the location to your font-awesome.min.css.
--<link rel="stylesheet" href="../css/bootstrap.min.css"> -<link rel="stylesheet" href="../css/font-awesome.min.css"> --
Use this method to integrate Font Awesome with Twitter Bootstrap using LESS.
-@import "sprites.less";
with @import "font-awesome.less";
@FontAwesomePath
variable to point to your font directory.
--@FontAwesomePath: "../font"; --
The font path is relative from your compiled CSS directory.
-I have never used either, so let me know if the included SCSS or SASS files have issues.
-Font Awesome works just as well without Twitter Bootstrap.
-Font Awesome supports IE7. If you need it, you have my condolences.
-<head>
of your html, reference the location to your font-awesome-ie7.min.css.
--<link rel="stylesheet" href="../css/bootstrap.min.css"> -<link rel="stylesheet" href="../css/font-awesome.min.css"> -<!--[if IE 7]> -<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> -<![endif]--> --
Many examples re-used from the Twitter Bootstrap documentation.
-Use Font Awesome icons in:
-Place Font Awesome icons just about anywhere with the <i>
tag.
-<i class="icon-camera-retro"></i> icon-camera-retro --
- To increase the size of icons relative to its container, use icon-large
, icon-2x
,
- icon-3x
, or icon-4x
.
-
- Increase the icon size by using the icon-large
(33% increase), icon-2x
,
- icon-3x
, or icon-4x
classes.
-
icon-camera-retro
-icon-camera-retro
-icon-camera-retro
-icon-camera-retro
--<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> -<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> -<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> -<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p> --
- Use the icon-spin
class to get any icon to rotate. Works best with icon-spinner
and
- icon-refresh
.
-
-<i class="icon-spinner icon-spin"></i> Spinner icon when loading content... --
- CSS3 animations aren't supported in IE7 - IE9. -
-
- Use icon-border
and pull-right
or pull-left
for easy pull quotes or
- article graphics.
-
-<i class="icon-quote-left icon-4x pull-left icon-muted"></i> -Use a few of the new styles together ... lots of new possibilities. --
-<i class="icon-flag icon-4x pull-left icon-border"></i> -Use a few of the new styles together ... lots of new possibilities. --
- - Reload - - Checkout -
- -- - Delete - - Settings -
- - - -
- Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
- pull-right
and pull-left
, and icon-spin
.
-
-<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> - <a class="btn" href="#"><i class="icon-align-center"></i></a> - <a class="btn" href="#"><i class="icon-align-right"></i></a> - <a class="btn" href="#"><i class="icon-align-justify"></i></a> -</div> --
-<div class="btn-group open"> - <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> --
-
Easily replace individual bullets.
--<ul class="icons"> - <li><i class="icon-ok"></i> Lists</li> - <li><i class="icon-ok"></i> Buttons</li> - <li><i class="icon-ok"></i> Button groups</li> - <li><i class="icon-ok"></i> Navigation</li> - <li><i class="icon-ok"></i> Prepended form inputs</li> -</ul> --
Use Font Awesome icons in navigation to provide helpful visual cues.
--<ul class="nav nav-list"> - <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li> - <li><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> --
-
- --<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> --
Anything you can do with CSS font styles, you can do with Font Awesome.
-Star Ratings (inspired by CSS Tricks)
-- Want to help make Font Awesome even more awesome? Contribute back to the Font Awesome community by designing - new pictograms for the set. -
-- If selected, you'll retain the CC-BY license to your pictogram and get attribution - right here on the Font Awesome site. -
-[Font Awesome] [Icon Contribution] icon-name
and attach your PDF file. If your
- icon makes it into Font Awesome (I'm keeping a very tight reign on quality), I'll ask what contact info you'd
- like to use for attribution.
- Here's the plan for future updates.
-Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome
.- I'm the lead product designer at Kyruus. I wake up every single day excited about my job. - Why? Kyruus is going to change healthcare. No exaggeration. -
- -- Kyruus is a well-funded, big data healthcare startup in Boston. We believe that the right data at the right time - can help doctors make better decisions. We believe data can save lives. -
- - What I love about Kyruus: -- Kyruus needs good people. Designers, app developers, big data masters, & interns that get real responsibility. Come work with me. -
- - Interested? Email me. -- - Hopefully you think Font Awesome is awesome. I've put hundreds of hours into the project to give back to the - open source community. If you'd like, here are some ways you can tell me thanks for all my hard work. -
-- Contribute icons to make Font Awesome even awesome-er. -
-- Contribute to a shiny - new iMac for me to keep making great icons. -
-- Or pick something straight - from my wish list. Gift cards are great. -
-- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. -
-- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. -
-`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover() {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]) {\n color: inherit;\n text-decoration: none;\n\n @include hover() {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,\n // making it impossible to interact with the content\n -ms-overflow-style: scrollbar;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\nth {\n // Matches default `