4 | Want to keep up with what's planned for Font Awesome? Check out our 5 | milestones on the GitHub project. 6 |
7 |4 | For complete documentation of the syntax changes in {{ site.fontawesome.minor_version }}, check out the 5 | examples. For the changes to icon names, 6 | @gtagliala has put together a 7 | great wiki page that 8 | documents all the changes. 9 |
10 |14 | Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, 15 | and anything that can be done with the power of CSS. 16 |
17 | {% endcapture %} 18 | {% include stripe-ad.html %} 19 | 20 | {% include why.html %} 21 | {% include thanks-to.html %} 22 |6 | fa-camera-retro 7 |
8 |Place Font Awesome icons just about anywhere with the <i> tag.
Anything you can do with CSS font styles, you can do with Font Awesome.
6 |Star Ratings (inspired by CSS Tricks)
9 |6 | 7 | Use a few styles together and you'll have easy pull quotes or a great introductory article icon. 8 |
9 |
12 | Use fa-border and pull-right or pull-left for easy pull quotes or
13 | article graphics.
14 |
4 | Found a problem with Font Awesome? Feel free to submit an issue on the GitHub project. But please keep the following in mind: 5 |
6 |4 | Hopefully you think Font Awesome is awesome. I've put hundreds of hours into the project to give back to the 5 | open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work. 6 |
7 |11 | Gittip is a great way to let developers know you appreciate their work. 12 |
13 |17 | Or pick something straight 18 | from my wish list. Gift cards are great. 19 |
20 |Use fa-ul and fa-li to easily replace default bullets in unordered lists.
6 | 7 | 8 | 9 |
10 |
13 | Use the fa-spin class to get any icon to rotate. Works well with fa-spinner,
14 | fa-refresh, and fa-cog.
15 |
22 | CSS3 animations aren't supported in IE8 - IE9. 23 |
24 |15 | Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf and copy 16 | and paste the icons (not the unicode) directly into your designs. 17 |
18 | {% endcapture %} 19 | {% include stripe-ad.html %} 20 | 21 |4 | Having trouble getting Font Awesome up and running? Something not working the way you think it should? I hate that 5 | I don't have time to answer Font Awesome support emails anymore. So here are some things you might wanna do: 6 |
7 |6 | Thanks to @robmadole and 7 | @supercodepoet for icon design 8 | review, advice, some Jekyll help, and being all around badass coders. 9 |
10 |13 | HUGE thanks to @gtagliala for doing such a fantastic job managing 14 | pull requests and issues on the Font Awesome 15 | GitHub project. 16 |
17 |20 | Thanks to MaxCDN for providing the excellent 21 | BootstrapCDN, the fastest and easiest way to 22 | get started with Font Awesome. 23 |
24 |
16 | After you get up and running, you can place Font Awesome icons just about
17 | anywhere with the <i> tag.
18 | Some examples appreciatively re-used from the Bootstrap documentation.
19 |
14 | Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
15 | Especially useful in things like nav lists.
16 |
16 | Font Awesome has a vibrant community of folks helping each other out. You can 17 | get support, 18 | report bugs, 19 | request new icons, 20 | submit pull requests, and 21 | check upcoming milestones. 22 |
23 | {% endcapture %} 24 | {% include stripe-ad.html %} 25 | 26 | {% include community/getting-support.html %} 27 | {% include community/reporting-bugs.html %} 28 | {% include community/requesting-new-icons.html %} 29 | {% include community/submitting-pull-requests.html %} 30 | {% include community/project-milestones.html %} 31 | 32 | {% include thanks-to.html %} 33 | {% include tell-me-thanks.html %} 34 |4 | New icons mostly start as requests by the 5 | Font Awesome community on GitHub. Want to request a new 6 | icon? Here are some things to keep in mind: 7 |
8 |Icon request: icon-name.
17 |
6 | normal
7 | fa-rotate-90
8 | fa-rotate-180
9 | fa-rotate-270
10 | fa-flip-horizontal
11 | fa-flip-vertical
12 |
16 | To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
17 |
fa-camera-retro
6 |fa-camera-retro
7 |fa-camera-retro
8 |fa-camera-retro
9 |fa-camera-retro
10 |
13 | To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x,
14 | fa-3x, fa-4x, or fa-5x classes.
15 |
fa-camera-retro
18 |fa-camera-retro
19 |fa-camera-retro
20 |fa-camera-retro
21 |fa-camera-retro
22 | {% endhighlight %} 23 |16 | You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}. 17 | Want to request new icons? Here's how. 18 | 19 | Need vectors or want to use on the desktop? Check the cheatsheet. 20 |
21 | {% endcapture %} 22 | {% include stripe-ad.html %} 23 | 24 | {% include icons/new.html %} 25 | {% include icons/web-application.html %} 26 | {% include icons/form-control.html %} 27 | {% include icons/currency.html %} 28 | {% include icons/text-editor.html %} 29 | {% include icons/directional.html %} 30 | {% include icons/video-player.html %} 31 | {% include icons/brand.html %} 32 | {% include icons/medical.html %} 33 |9 | 10 | 11 | 12 | 13 | Twitter Icon 14 | 15 | 16 | 17 | 18 | Facebook Icon 19 | 20 | 21 | 22 | 23 | GitHub Icon 24 |
25 |26 | 27 | 28 | 29 | 30 | Twitter Icon 31 | 32 | 33 | 34 | 35 | Facebook Icon 36 | 37 | 38 | 39 | 40 | GitHub Icon 41 |
42 |43 | 44 | 45 | 46 | 47 | Twitter Icon 48 | 49 | 50 | 51 | 52 | Facebook Icon 53 | 54 | 55 | 56 | 57 | GitHub Icon 58 |
-------------------------------------------------------------------------------- /src/3.2.1/assets/less/bootstrap-2.3.2/responsive-utilities.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // IE10 Metro responsive 7 | // Required for Windows 8 Metro split-screen snapping with IE10 8 | // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ 9 | @-ms-viewport{ 10 | width: device-width; 11 | } 12 | 13 | // Hide from screenreaders and browsers 14 | // Credit: HTML5 Boilerplate 15 | .hidden { 16 | display: none; 17 | visibility: hidden; 18 | } 19 | 20 | // Visibility utilities 21 | 22 | // For desktops 23 | .visible-phone { display: none !important; } 24 | .visible-tablet { display: none !important; } 25 | .hidden-phone { } 26 | .hidden-tablet { } 27 | .hidden-desktop { display: none !important; } 28 | .visible-desktop { display: inherit !important; } 29 | 30 | // Tablets & small desktops only 31 | @media (min-width: 768px) and (max-width: 979px) { 32 | // Hide everything else 33 | .hidden-desktop { display: inherit !important; } 34 | .visible-desktop { display: none !important ; } 35 | // Show 36 | .visible-tablet { display: inherit !important; } 37 | // Hide 38 | .hidden-tablet { display: none !important; } 39 | } 40 | 41 | // Phones only 42 | @media (max-width: 767px) { 43 | // Hide everything else 44 | .hidden-desktop { display: inherit !important; } 45 | .visible-desktop { display: none !important; } 46 | // Show 47 | .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior 48 | // Hide 49 | .hidden-phone { display: none !important; } 50 | } 51 | 52 | // Print utilities 53 | .visible-print { display: none !important; } 54 | .hidden-print { } 55 | 56 | @media print { 57 | .visible-print { display: inherit !important; } 58 | .hidden-print { display: none !important; } 59 | } 60 | -------------------------------------------------------------------------------- /src/_includes/new-features.html: -------------------------------------------------------------------------------- 1 | {% capture stripe_ad_content %} 2 |3 | Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome 4 | {{ site.fontawesome.minor_version }}. Have some ideas for new features? 5 | Help contribute. 6 |
7 | {% endcapture %} 8 | {% include stripe-ad.html %} 9 | 10 |2 | 3 | 4 | 5 | 6 | 7 | Twitter Icon 8 | 9 | 10 | 11 | 12 | 13 | 14 | Facebook Icon 15 | 16 | 17 | 18 | 19 | 20 | 21 | GitHub Icon 22 | 23 |
24 |25 | 26 | 27 | 28 | 29 | 30 | Twitter Icon 31 | 32 | 33 | 34 | 35 | 36 | 37 | Facebook Icon 38 | 39 | 40 | 41 | 42 | 43 | 44 | GitHub Icon 45 | 46 |
47 |48 | 49 | 50 | 51 | 52 | 53 | Twitter Icon 54 | 55 | 56 | 57 | 58 | 59 | 60 | Facebook Icon 61 | 62 | 63 | 64 | 65 | 66 | 67 | GitHub Icon 68 | 69 |
-------------------------------------------------------------------------------- /src/3.2.1/assets/less/responsive-767px-max.less: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Landscape phone to desktop/tablet 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (max-width: 767px) { 7 | .jumbotron, footer, #social-buttons { 8 | padding-left: 20px; 9 | padding-right: 20px; 10 | margin-right: -20px; 11 | margin-left: -20px; 12 | } 13 | 14 | #iconCarousel { 15 | @size: 180px; 16 | font-size: @size; 17 | line-height: @size; 18 | width: 280px; 19 | margin: 30px auto 0; 20 | .carousel-control { 21 | top: @size / 2; 22 | .square(44px); 23 | font-size: 44px; 24 | line-height: 44px; 25 | left: -7px; 26 | &.right { right: -7px; } 27 | } 28 | } 29 | 30 | .jumbotron-index { 31 | h1 { font-size: 58px; } 32 | p { font-size: 24px; } 33 | .btn-large { 34 | font-size: 20px; 35 | padding: 14px 26px; 36 | } 37 | .shameless-self-promotion { font-size: 12px; } 38 | } 39 | 40 | .jumbotron-ad { 41 | h1 { font-size: 39px; } 42 | p { 43 | font-size: 20px; 44 | margin-bottom: 20px; 45 | } 46 | } 47 | 48 | .jumbotron-icon { 49 | .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 0; } 50 | .icon-6 { font-size: 16em; } 51 | h1 small { 52 | display: block; 53 | margin-top: 15px; 54 | margin-left: 0; 55 | line-height: 20px; 56 | } 57 | } 58 | 59 | .stripe-ad .lead { 60 | margin: 0 0 30px; 61 | } 62 | 63 | #carbonads-container { 64 | margin-right: -20px; 65 | margin-left: -20px; 66 | .carbonad { 67 | width: 100%; 68 | height: 120px; 69 | border-right: none; 70 | border-left: none; 71 | } 72 | } 73 | #azcarbon { 74 | width: 300px; 75 | margin: 0 auto; 76 | } 77 | 78 | .sticky-footer(170px, 40px, 40px, 60px); // sets default values for sticky footer 79 | .footer { 80 | padding-left: 20px; 81 | padding-right: 20px; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/3.2.1/assets/less/bootstrap-2.3.2/tooltip.less: -------------------------------------------------------------------------------- 1 | // 2 | // Tooltips 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .tooltip { 8 | position: absolute; 9 | z-index: @zindexTooltip; 10 | display: block; 11 | visibility: visible; 12 | font-size: 11px; 13 | line-height: 1.4; 14 | .opacity(0); 15 | &.in { .opacity(80); } 16 | &.top { margin-top: -3px; padding: 5px 0; } 17 | &.right { margin-left: 3px; padding: 0 5px; } 18 | &.bottom { margin-top: 3px; padding: 5px 0; } 19 | &.left { margin-left: -3px; padding: 0 5px; } 20 | } 21 | 22 | // Wrapper for the tooltip content 23 | .tooltip-inner { 24 | max-width: 200px; 25 | padding: 8px; 26 | color: @tooltipColor; 27 | text-align: center; 28 | text-decoration: none; 29 | background-color: @tooltipBackground; 30 | .border-radius(@baseBorderRadius); 31 | } 32 | 33 | // Arrows 34 | .tooltip-arrow { 35 | position: absolute; 36 | width: 0; 37 | height: 0; 38 | border-color: transparent; 39 | border-style: solid; 40 | } 41 | .tooltip { 42 | &.top .tooltip-arrow { 43 | bottom: 0; 44 | left: 50%; 45 | margin-left: -@tooltipArrowWidth; 46 | border-width: @tooltipArrowWidth @tooltipArrowWidth 0; 47 | border-top-color: @tooltipArrowColor; 48 | } 49 | &.right .tooltip-arrow { 50 | top: 50%; 51 | left: 0; 52 | margin-top: -@tooltipArrowWidth; 53 | border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; 54 | border-right-color: @tooltipArrowColor; 55 | } 56 | &.left .tooltip-arrow { 57 | top: 50%; 58 | right: 0; 59 | margin-top: -@tooltipArrowWidth; 60 | border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; 61 | border-left-color: @tooltipArrowColor; 62 | } 63 | &.bottom .tooltip-arrow { 64 | top: 0; 65 | left: 50%; 66 | margin-left: -@tooltipArrowWidth; 67 | border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; 68 | border-bottom-color: @tooltipArrowColor; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/assets/less/site/bootstrap/jumbotron.less: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | background-color: lighten(@jumbotron-bg, 2%); 3 | border-top: 1px solid mix(@jumbotron-bg, @jumbotron-color, 90%); 4 | border-bottom: 1px solid @jumbotron-border; 5 | margin-bottom: 0; 6 | &, h1 { color: @jumbotron-color; } 7 | padding: 50px 0 40px; 8 | 9 | h1 { 10 | font-size: 80px; 11 | letter-spacing: -2px; 12 | line-height: 1; 13 | text-shadow: 4px 3px 0px @jumbotron-bg, 9px 8px 0px rgba(0,0,0,0.15); // double text shadow 14 | margin: 0 0 15px; 15 | } 16 | p { 17 | font-family: @font-family-alt; 18 | color: mix(@jumbotron-color, @jumbotron-bg, 75%); 19 | margin-top: 15px; 20 | margin-bottom: 15px; 21 | font-size: 24px; 22 | line-height: 1.3; 23 | font-weight: lighter; 24 | text-shadow: 0 1px 0 rgba(0,0,0,0.15); 25 | } 26 | } 27 | 28 | .jumbotron-icon { 29 | padding: 30px 0 25px; 30 | background-color: @gray-lighter; 31 | color: @gray-darker; 32 | &, h1 { text-shadow: 0 1px 0 #fff; } 33 | border-bottom-color: mix(@gray-light, @gray-lighter, 25%); 34 | border-top-color: mix(#fff, @gray-lighter, 50%); 35 | h1 { 36 | color: @gray-darker; 37 | font-size: 30px; 38 | margin-top: @buffer-lg; 39 | small { 40 | letter-spacing: normal; 41 | font-family: @font-family-sans-serif; 42 | font-size: @font-size-base; 43 | margin-left: 20px; 44 | } 45 | } 46 | 47 | .info-icons { 48 | font-size: @font-size-base; 49 | } 50 | .info-details { 51 | float: left; 52 | p { 53 | margin: 25px 0; 54 | font-weight: bold; 55 | } 56 | .dl-horizontal { 57 | dt { width: @component-offset-horizontal - 100; } 58 | dd { margin-left: @component-offset-horizontal - 85; } 59 | } 60 | } 61 | .fa-2 { font-size: 2em; } 62 | .fa-3 { font-size: 4em; } 63 | .fa-4 { font-size: 7em; } 64 | .fa-5 { font-size: 12em; } 65 | .fa-6 { font-size: 20em; } 66 | 67 | .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; } 68 | } 69 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | safe: false 2 | port: 7998 3 | baseurl: /Font-Awesome/ # Where GitHub serves the project up from 4 | url: http://localhost:7998 5 | 6 | source: src 7 | destination: _gh_pages 8 | plugins: src/_plugins 9 | 10 | pygments: true 11 | permalink: pretty 12 | 13 | # ensures SCSS files are compiled 14 | include: [_bordered-pulled.scss, _core.scss, _fixed-width.scss, _icons.scss, _larger.scss, _list.scss, _mixins.scss, _path.scss, _rotated-flipped.scss, _spinning.scss, _stacked.scss, _variables.scss] 15 | 16 | # used in building icon pages 17 | icon_meta: src/icons.yml 18 | icon_layout: icon.html # Relative to _layouts directory 19 | icon_destination: icon # Relative to destination 20 | 21 | fontawesome: 22 | version: 4.0.3 23 | minor_version: 4.0 24 | url: http://fontawesome.io 25 | legacy_url: http://fortawesome.github.com/Font-Awesome/ 26 | blog_url: http://blog.fontawesome.io 27 | twitter: fontawesome 28 | tagline: The iconic font designed for Bootstrap 29 | css_prefix: fa 30 | author: 31 | name: Dave Gandy 32 | email: dave@fontawesome.io 33 | twitter: davegandy 34 | work: 35 | name: Kyruus 36 | url: http://kyruus.com 37 | title: Lead Product Designer 38 | github: 39 | url: https://github.com/FortAwesome/Font-Awesome 40 | project: Font-Awesome 41 | org: FortAwesome 42 | license: 43 | font: 44 | version: SIL OFL 1.1 45 | url: http://scripts.sil.org/OFL 46 | code: 47 | version: MIT License 48 | url: http://opensource.org/licenses/mit-license.html 49 | documentation: 50 | version: CC BY 3.0 51 | url: http://creativecommons.org/licenses/by/3.0/ 52 | 53 | bootstrap: 54 | version: 3.0.0 55 | url: http://getbootstrap.com 56 | 57 | jquery: 58 | version: 1.10.2 59 | -------------------------------------------------------------------------------- /src/assets/less/bootstrap-3.0.0/print.less: -------------------------------------------------------------------------------- 1 | // 2 | // Basic print styles 3 | // -------------------------------------------------- 4 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 5 | 6 | @media print { 7 | 8 | * { 9 | text-shadow: none !important; 10 | color: #000 !important; // Black prints faster: h5bp.com/s 11 | background: transparent !important; 12 | box-shadow: none !important; 13 | } 14 | 15 | a, 16 | a:visited { 17 | text-decoration: underline; 18 | } 19 | 20 | a[href]:after { 21 | content: " (" attr(href) ")"; 22 | } 23 | 24 | abbr[title]:after { 25 | content: " (" attr(title) ")"; 26 | } 27 | 28 | // Don't show links for images, or javascript/internal links 29 | .ir a:after, 30 | a[href^="javascript:"]:after, 31 | a[href^="#"]:after { 32 | content: ""; 33 | } 34 | 35 | pre, 36 | blockquote { 37 | border: 1px solid #999; 38 | page-break-inside: avoid; 39 | } 40 | 41 | thead { 42 | display: table-header-group; // h5bp.com/t 43 | } 44 | 45 | tr, 46 | img { 47 | page-break-inside: avoid; 48 | } 49 | 50 | img { 51 | max-width: 100% !important; 52 | } 53 | 54 | @page { 55 | margin: 2cm .5cm; 56 | } 57 | 58 | p, 59 | h2, 60 | h3 { 61 | orphans: 3; 62 | widows: 3; 63 | } 64 | 65 | h2, 66 | h3 { 67 | page-break-after: avoid; 68 | } 69 | 70 | // Bootstrap components 71 | .navbar { 72 | display: none; 73 | } 74 | .table { 75 | td, 76 | th { 77 | background-color: #fff !important; 78 | } 79 | } 80 | .btn, 81 | .dropup > .btn { 82 | > .caret { 83 | border-top-color: #000 !important; 84 | } 85 | } 86 | .label { 87 | border: 1px solid #000; 88 | } 89 | 90 | .table { 91 | border-collapse: collapse !important; 92 | } 93 | .table-bordered { 94 | th, 95 | td { 96 | border: 1px solid #ddd !important; 97 | } 98 | } 99 | 100 | } 101 | -------------------------------------------------------------------------------- /src/_includes/why.html: -------------------------------------------------------------------------------- 1 |
30 | To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x
31 | for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse
32 | can be used as an alternative icon color. You can even throw larger icon classes on the parent
33 | to get further control of sizing.
34 |
After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag:
16 | Font Awesome is fully open source and is GPL compatible. You can use it for commercial projects, open source 17 | projects, or really just about whatever you want. 18 |
19 | {% endcapture %} 20 | {% include stripe-ad.html %} 21 | 22 |font-awesome/fonts/.
39 | font-awesome/css/,
51 | font-awesome/less/, and
52 | font-awesome/scss/.
53 |
4 |-
5 |
6 |
7 | -
8 |
9 |
10 | -
11 | Follow @{{ site.fontawesome.twitter }}
12 |
13 | -
14 | Tweet
15 |
16 |
17 |