Подробности
Категория: Uncategorised

Для тех, кто хочет поддержать нас финансами либо организационно, выполняя определённую работу, мы даём координаты для связи:

sghappylab@mail.ru

8(915) 397-2553

 

Все остальные вопросы разрешаются на страницах Форума.

template features

INFLUENCE

A Premium Joomla 3 Template



Influence is the perfect personal page web template for Joomla! Designed for conference speakers, artists, DJs, musicians, trainers, coaches, designers, and more, Influence will grab your users attention and win the over with its clean, fast loading structured layout and subtle effects.

The template was built with the latest JoomlaXTC Framework with total control over your site's look & feel—from Width, Layout,s Backgrounds, Font Colors / Sizes / Typesets and Responsive Control. The XTC framework allows quick and easy styling without the need to edit one line of code!






XTC Framework 4.1: Built on Bootstrap

Bootstrap is a Sleek, intuitive, and powerful front-end framework for faster and easier web development. We use a new responsive, fluid grid system to create seamless, responsive layouts. By using the core Bootstrap and custom break points, our responsive design is as dynamic as possible using only CSS3 media queries.

Bootstrap also provides styles for common HTML elements like typography, code, tables, forms, and buttons. It also includes Glyphicons, a great little icon set, as well as the Font Awesome icon set for even more font based icons.

The XTC Bootstrap grid utilizes 12 columns, allowing you to create a fluid AND responsive layout. With the responsive grid in, the layout will adapt to any screensize. The columns become fluid and stack vertically, and each column will adapt to the available size it should have ensuring proper proportions all devices.

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Template Features

Specifications:

  • 4 Preset Styles
  • 100+ Module Positions
  • 60+ Stock Module Suffix Styles
  • CSS3 Menu Styles
  • Commented source files
  • Browser Support for IE, Firefox, Opera, Safari and Chrome.

Advanced Features:

  • XTC Template Framework
  • Tableless Template Design
  • Responsive Grid
  • Bootstrapped Template
  • Article Sidebars
  • Mulitple Layout Options
  • Custom Component Overides

Package Includes:

  • JoomlaXTC Quickstart Installer
  • JoomlaXTC Club Template

    • Extensions Included:

  • JoomlaXTC Deluxe NewsPro
  • JoomlaXTC Html Pro
  • JoomlaXTC Image Gallery
  • JoomlaXTC Quick YouTube
  • ACYMailing Starter Edition
Подробности

This template comes with 160+ module suffix styles.
Each suffix style can be used in conjunction with others : Simply use an space ' ' to bridge the suffix styles!

Font Awesome Icon Suffixes

Create Font Awesome Icons for your module title simply by adding the icon name to the module suffix class!

Font Awesome Icons

Example of american-sign-language-interpreting
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of audio-description
Example of blind
Example of braille
Example of deaf
Example of deafness (alias)
Example of envira
Example of gitlab
Example of glide
Example of glide-g
Example of hard-of-hearing (alias)
Example of low-vision
Example of question-circle-o
Example of sign-language
Example of signing (alias)
Example of snapchat
Example of snapchat-ghost
Example of snapchat-square
Example of universal-access
Example of viadeo
Example of viadeo-square
Example of volume-control-phone
Example of wheelchair-alt
Example of wpbeginner
Example of wpforms

Web Application Icons

Example of adjust
Example of american-sign-language-interpreting
Example of anchor
Example of archive
Example of area-chart
Example of arrows
Example of arrows-h
Example of arrows-v
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of asterisk
Example of at
Example of audio-description
Example of automobile (alias)
Example of balance-scale
Example of ban
Example of bank (alias)
Example of bar-chart
Example of bar-chart-o (alias)
Example of barcode
Example of bars
Example of battery-0 (alias)
Example of battery-1 (alias)
Example of battery-2 (alias)
Example of battery-3 (alias)
Example of battery-4 (alias)
Example of battery-empty
Example of battery-full
Example of battery-half
Example of battery-quarter
Example of battery-three-quarters
Example of bed
Example of beer
Example of bell
Example of bell-o
Example of bell-slash
Example of bell-slash-o
Example of bicycle
Example of binoculars
Example of birthday-cake
Example of blind
Example of bluetooth
Example of bluetooth-b
Example of bolt
Example of bomb
Example of book
Example of bookmark
Example of bookmark-o
Example of braille
Example of briefcase
Example of bug
Example of building
Example of building-o
Example of bullhorn
Example of bullseye
Example of bus
Example of cab (alias)
Example of calculator
Example of calendar
Example of calendar-check-o
Example of calendar-minus-o
Example of calendar-o
Example of calendar-plus-o
Example of calendar-times-o
Example of camera
Example of camera-retro
Example of car
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of cart-arrow-down
Example of cart-plus
Example of cc
Example of certificate
Example of check
Example of check-circle
Example of check-circle-o
Example of check-square
Example of check-square-o
Example of child
Example of circle
Example of circle-o
Example of circle-o-notch
Example of circle-thin
Example of clock-o
Example of clone
Example of close (alias)
Example of cloud
Example of cloud-download
Example of cloud-upload
Example of code
Example of code-fork
Example of coffee
Example of cog
Example of cogs
Example of comment
Example of comment-o
Example of commenting
Example of commenting-o
Example of comments
Example of comments-o
Example of compass
Example of copyright
Example of creative-commons
Example of credit-card
Example of credit-card-alt
Example of crop
Example of crosshairs
Example of cube
Example of cubes
Example of cutlery
Example of dashboard (alias)
Example of database
Example of deaf
Example of deafness (alias)
Example of desktop
Example of diamond
Example of dot-circle-o
Example of download
Example of edit (alias)
Example of ellipsis-h
Example of ellipsis-v
Example of envelope
Example of envelope-o
Example of envelope-square
Example of eraser
Example of exchange
Example of exclamation
Example of exclamation-circle
Example of exclamation-triangle
Example of external-link
Example of external-link-square
Example of eye
Example of eye-slash
Example of eyedropper
Example of fax
Example of feed (alias)
Example of female
Example of fighter-jet
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)
Example of film
Example of filter
Example of fire
Example of fire-extinguisher
Example of flag
Example of flag-checkered
Example of flag-o
Example of flash (alias)
Example of flask
Example of folder
Example of folder-o
Example of folder-open
Example of folder-open-o
Example of frown-o
Example of futbol-o
Example of gamepad
Example of gavel
Example of gear (alias)
Example of gears (alias)
Example of gift
Example of glass
Example of globe
Example of graduation-cap
Example of group (alias)
Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of hard-of-hearing (alias)
Example of hashtag
Example of hdd-o
Example of headphones
Example of heart
Example of heart-o
Example of heartbeat
Example of history
Example of home
Example of hotel (alias)
Example of hourglass
Example of hourglass-1 (alias)
Example of hourglass-2 (alias)
Example of hourglass-3 (alias)
Example of hourglass-end
Example of hourglass-half
Example of hourglass-o
Example of hourglass-start
Example of i-cursor
Example of image (alias)
Example of inbox
Example of industry
Example of info
Example of info-circle
Example of institution (alias)
Example of key
Example of keyboard-o
Example of language
Example of laptop
Example of leaf
Example of legal (alias)
Example of lemon-o
Example of level-down
Example of level-up
Example of life-bouy (alias)
Example of life-buoy (alias)
Example of life-ring
Example of life-saver (alias)
Example of lightbulb-o
Example of line-chart
Example of location-arrow
Example of lock
Example of low-vision
Example of magic
Example of magnet
Example of mail-forward (alias)
Example of mail-reply (alias)
Example of mail-reply-all (alias)
Example of male
Example of map
Example of map-marker
Example of map-o
Example of map-pin
Example of map-signs
Example of meh-o
Example of microphone
Example of microphone-slash
Example of minus
Example of minus-circle
Example of minus-square
Example of minus-square-o
Example of mobile
Example of mobile-phone (alias)
Example of money
Example of moon-o
Example of mortar-board (alias)
Example of motorcycle
Example of mouse-pointer
Example of music
Example of navicon (alias)
Example of newspaper-o
Example of object-group
Example of object-ungroup
Example of paint-brush
Example of paper-plane
Example of paper-plane-o
Example of paw
Example of pencil
Example of pencil-square
Example of pencil-square-o
Example of percent
Example of phone
Example of phone-square
Example of photo (alias)
Example of picture-o
Example of pie-chart
Example of plane
Example of plug
Example of plus
Example of plus-circle
Example of plus-square
Example of plus-square-o
Example of power-off
Example of print
Example of puzzle-piece
Example of qrcode
Example of question
Example of question-circle
Example of question-circle-o
Example of quote-left
Example of quote-right
Example of random
Example of recycle
Example of refresh
Example of registered
Example of remove (alias)
Example of reorder (alias)
Example of reply
Example of reply-all
Example of retweet
Example of road
Example of rocket
Example of rss
Example of rss-square
Example of search
Example of search-minus
Example of search-plus
Example of send (alias)
Example of send-o (alias)
Example of server
Example of share
Example of share-alt
Example of share-alt-square
Example of share-square
Example of share-square-o
Example of shield
Example of ship
Example of shopping-bag
Example of shopping-basket
Example of shopping-cart
Example of sign-in
Example of sign-language
Example of sign-out
Example of signal
Example of signing (alias)
Example of sitemap
Example of sliders
Example of smile-o
Example of soccer-ball-o (alias)
Example of sort
Example of sort-alpha-asc
Example of sort-alpha-desc
Example of sort-amount-asc
Example of sort-amount-desc
Example of sort-asc
Example of sort-desc
Example of sort-down (alias)
Example of sort-numeric-asc
Example of sort-numeric-desc
Example of sort-up (alias)
Example of space-shuttle
Example of spinner
Example of spoon
Example of square
Example of square-o
Example of star
Example of star-half
Example of star-half-empty (alias)
Example of star-half-full (alias)
Example of star-half-o
Example of star-o
Example of sticky-note
Example of sticky-note-o
Example of street-view
Example of suitcase
Example of sun-o
Example of support (alias)
Example of tablet
Example of tachometer
Example of tag
Example of tags
Example of tasks
Example of taxi
Example of television
Example of terminal
Example of thumb-tack
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up
Example of ticket
Example of times
Example of times-circle
Example of times-circle-o
Example of tint
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-off
Example of toggle-on
Example of toggle-right (alias)
Example of toggle-up (alias)
Example of trademark
Example of trash
Example of trash-o
Example of tree
Example of trophy
Example of truck
Example of tty
Example of tv (alias)
Example of umbrella
Example of universal-access
Example of university
Example of unlock
Example of unlock-alt
Example of unsorted (alias)
Example of upload
Example of user
Example of user-plus
Example of user-secret
Example of user-times
Example of users
Example of video-camera
Example of volume-control-phone
Example of volume-down
Example of volume-off
Example of volume-up
Example of warning (alias)
Example of wheelchair
Example of wheelchair-alt
Example of wifi
Example of wrench

Accessibility Icons

Example of american-sign-language-interpreting
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of audio-description
Example of blind
Example of braille
Example of cc
Example of deaf
Example of deafness (alias)
Example of hard-of-hearing (alias)
Example of low-vision
Example of question-circle-o
Example of sign-language
Example of signing (alias)
Example of tty
Example of universal-access
Example of volume-control-phone
Example of wheelchair
Example of wheelchair-alt

Hand Icons

Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up

Transportation Icons

Example of ambulance
Example of automobile (alias)
Example of bicycle
Example of bus
Example of cab (alias)
Example of car
Example of fighter-jet
Example of motorcycle
Example of plane
Example of rocket
Example of ship
Example of space-shuttle
Example of subway
Example of taxi
Example of train
Example of truck
Example of wheelchair

Gender Icons

Example of genderless
Example of intersex (alias)
Example of mars
Example of mars-double
Example of mars-stroke
Example of mars-stroke-h
Example of mars-stroke-v
Example of mercury
Example of neuter
Example of transgender
Example of transgender-alt
Example of venus
Example of venus-double
Example of venus-mars

File Type Icons

Example of file
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-o
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-text
Example of file-text-o
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)

Spinner Icons

Example of circle-o-notch
Example of cog
Example of gear (alias)
Example of refresh
Example of spinner

Form Control Icons

Example of check-square
Example of check-square-o
Example of circle
Example of circle-o
Example of dot-circle-o
Example of minus-square
Example of minus-square-o
Example of plus-square
Example of plus-square-o
Example of square
Example of square-o

Payment Icons

Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of credit-card
Example of credit-card-alt
Example of google-wallet
Example of paypal

Chart Icons

Example of area-chart
Example of bar-chart
Example of bar-chart-o (alias)
Example of line-chart
Example of pie-chart

Currency Icons

Example of bitcoin (alias)
Example of btc
Example of cny (alias)
Example of dollar (alias)
Example of eur
Example of euro (alias)
Example of gbp
Example of gg
Example of gg-circle
Example of ils
Example of inr
Example of jpy
Example of krw
Example of money
Example of rmb (alias)
Example of rouble (alias)
Example of rub
Example of ruble (alias)
Example of rupee (alias)
Example of shekel (alias)
Example of sheqel (alias)
Example of try
Example of turkish-lira (alias)
Example of usd
Example of won (alias)
Example of yen (alias)

Text Editor Icons

Example of align-center
Example of align-justify
Example of align-left
Example of align-right
Example of bold
Example of chain (alias)
Example of chain-broken
Example of clipboard
Example of columns
Example of copy (alias)
Example of cut (alias)
Example of dedent (alias)
Example of eraser
Example of file
Example of file-o
Example of file-text
Example of file-text-o
Example of files-o
Example of floppy-o
Example of font
Example of header
Example of indent
Example of italic
Example of link
Example of list
Example of list-alt
Example of list-ol
Example of list-ul
Example of outdent
Example of paperclip
Example of paragraph
Example of paste (alias)
Example of repeat
Example of rotate-left (alias)
Example of rotate-right (alias)
Example of save (alias)
Example of scissors
Example of strikethrough
Example of subscript
Example of superscript
Example of table
Example of text-height
Example of text-width
Example of th
Example of th-large
Example of th-list
Example of underline
Example of undo
Example of unlink (alias)

Directional Icons

Example of angle-double-down
Example of angle-double-left
Example of angle-double-right
Example of angle-double-up
Example of angle-down
Example of angle-left
Example of angle-right
Example of angle-up
Example of arrow-circle-down
Example of arrow-circle-left
Example of arrow-circle-o-down
Example of arrow-circle-o-left
Example of arrow-circle-o-right
Example of arrow-circle-o-up
Example of arrow-circle-right
Example of arrow-circle-up
Example of arrow-down
Example of arrow-left
Example of arrow-right
Example of arrow-up
Example of arrows
Example of arrows-alt
Example of arrows-h
Example of arrows-v
Example of caret-down
Example of caret-left
Example of caret-right
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of caret-up
Example of chevron-circle-down
Example of chevron-circle-left
Example of chevron-circle-right
Example of chevron-circle-up
Example of chevron-down
Example of chevron-left
Example of chevron-right
Example of chevron-up
Example of exchange
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of long-arrow-down
Example of long-arrow-left
Example of long-arrow-right
Example of long-arrow-up
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-right (alias)
Example of toggle-up (alias)

Video Player Icons

Example of arrows-alt
Example of backward
Example of compress
Example of eject
Example of expand
Example of fast-backward
Example of fast-forward
Example of forward
Example of pause
Example of pause-circle
Example of pause-circle-o
Example of play
Example of play-circle
Example of play-circle-o
Example of random
Example of step-backward
Example of step-forward
Example of stop
Example of stop-circle
Example of stop-circle-o
Example of youtube-play

Brand Icons

Example of 500px
Example of adn
Example of amazon
Example of android
Example of angellist
Example of apple
Example of behance
Example of behance-square
Example of bitbucket
Example of bitbucket-square
Example of bitcoin (alias)
Example of black-tie
Example of bluetooth
Example of bluetooth-b
Example of btc
Example of buysellads
Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of chrome
Example of codepen
Example of codiepie
Example of connectdevelop
Example of contao
Example of css3
Example of dashcube
Example of delicious
Example of deviantart
Example of digg
Example of dribbble
Example of dropbox
Example of drupal
Example of edge
Example of empire
Example of envira
Example of expeditedssl
Example of facebook
Example of facebook-f (alias)
Example of facebook-official
Example of facebook-square
Example of firefox
Example of flickr
Example of fonticons
Example of fort-awesome
Example of forumbee
Example of foursquare
Example of ge (alias)
Example of get-pocket
Example of gg
Example of gg-circle
Example of git
Example of git-square
Example of github
Example of github-alt
Example of github-square
Example of gitlab
Example of gittip (alias)
Example of glide
Example of glide-g
Example of google
Example of google-plus
Example of google-plus-square
Example of google-wallet
Example of gratipay
Example of hacker-news
Example of houzz
Example of html5
Example of instagram
Example of internet-explorer
Example of ioxhost
Example of joomla
Example of jsfiddle
Example of lastfm
Example of lastfm-square
Example of leanpub
Example of linkedin
Example of linkedin-square
Example of linux
Example of maxcdn
Example of meanpath
Example of medium
Example of mixcloud
Example of modx
Example of odnoklassniki
Example of odnoklassniki-square
Example of opencart
Example of openid
Example of opera
Example of optin-monster
Example of pagelines
Example of paypal
Example of pied-piper
Example of pied-piper-alt
Example of pinterest
Example of pinterest-p
Example of pinterest-square
Example of product-hunt
Example of qq
Example of ra (alias)
Example of rebel
Example of reddit
Example of reddit-alien
Example of reddit-square
Example of renren
Example of safari
Example of scribd
Example of sellsy
Example of share-alt
Example of share-alt-square
Example of shirtsinbulk
Example of simplybuilt
Example of skyatlas
Example of skype
Example of slack
Example of slideshare
Example of snapchat
Example of snapchat-ghost
Example of snapchat-square
Example of soundcloud
Example of spotify
Example of stack-exchange
Example of stack-overflow
Example of steam
Example of steam-square
Example of stumbleupon
Example of stumbleupon-circle
Example of tencent-weibo
Example of trello
Example of tripadvisor
Example of tumblr
Example of tumblr-square
Example of twitch
Example of twitter
Example of twitter-square
Example of usb
Example of viacoin
Example of viadeo
Example of viadeo-square
Example of vimeo
Example of vimeo-square
Example of vine
Example of vk
Example of wechat (alias)
Example of weibo
Example of weixin
Example of whatsapp
Example of wikipedia-w
Example of windows
Example of wordpress
Example of wpbeginner
Example of wpforms
Example of xing
Example of xing-square
Example of y-combinator
Example of y-combinator-square (alias)
Example of yahoo
Example of yc (alias)
Example of yc-square (alias)
Example of yelp
Example of youtube
Example of youtube-play
Example of youtube-square
  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
  • Brand icons should only be used to represent the company or product to which they refer.

Medical Icons

Example of ambulance
Example of h-square
Example of heart
Example of heart-o
Example of heartbeat
Example of hospital-o
Example of medkit
Example of plus-square
Example of stethoscope
Example of user-md
Example of wheelchair

Module Classes

Подробности
Категория: Uncategorised

Base Typography

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

 

 

DropCaps

D

ropcap Styling for article intros and much more. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nunc lorem, eleifend vel, rhoncus sed, congue quis, leo. Aliquam dignissim dui quis purus. Phasellus vehicula, ante eu mollis pharetra, enim felis iaculis lacus, congue ullamcorper lorem eros at libero.

<div class="dropcap">D</div>ropcap Styling

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="pull-right">
  ...
</blockquote>

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Quotes

Large Quotes

  This is the large quote style using font awesome icons    

<i class="fa fa-quote-left fa-5x"></i>This is the large quote style using font awesome icons<i class="fa fa-quote-right fa-5x"></i>

Medium Quotes

    This is the medium quote style using font awesome icons    

<i class="fa fa-quote-left fa-3x"></i>This is the medium quote style using font awesome icons<i class="fa fa-quote-right fa-3x"></i>

Small Quotes

    This is the small quote style using font awesome icons    

<i class="fa fa-quote-left"></i>This is the small quote style using font awesome icons<i class="fa fa-quote-right"></i>

Code

For displaying source code within your document.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Tables

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  …
</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  …
</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
  …
</table>

Optional row classes

Use contextual classes to color table rows.

Class Description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm 
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
<caption> Description or summary of what the table holds, especially useful for screen readers 
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Blog Div Styles

This is Blog Red

<div class="blog-red">blog-red</div>

This is Blog Blue

<div class=">blog-blue">blog-blue</div>

This is Blog Green

<div class="blog-green">blog-green</div>

This is Blog Cyan

<div class="blog-cyan">blog-cyan</div>
This is Blog Tan

<div class="blog-tan">blog-tan</div>

This is Blog Yellow

<div class="blog-yellow">blog-yellow</div>

This is Blog Grey

<div class="blog-grey">blog-grey</div>

This is Blog Pink

<div class="blog-pink">blog-pink</div>

Flat Button Styles



<button class="btnblue">Blue Button</button>




<button class="btnred">Red Button</button>




<button class="btngreen">Green Button</button>


<button class="btngrey">Grey Button</button>




<button class="btnyellow">Yellow Button</button>




<button class="btnorange">Orange Button</button>




<button class="btn basecolor_1">BaseColor 1</button>




<button class="btn basecolor_2">BaseColor 2</button>




<button class="btn basecolor_3">BaseColor 3</button>




<button class="btn basecolor_4">BaseColor 4</button>




<button class="btn basecolor_5">BaseColor 5</button>

Bootstrap Buttons

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
<a class="btn" href="/">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Bootstrap Components

Accordion

Collapsible Group Item #1
Anim pariatur cliche...
Collapsible Group Item #2
Anim pariatur cliche...
Collapsible Group Item #3
Anim pariatur cliche...
Collapsible Group Item #4
Anim pariatur cliche...
Collapsible Group Item #5
Anim pariatur cliche...
Collapsible Group Item #6
Anim pariatur cliche...
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Carousel

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators"&gt
    <li data-target="#myCarousel" data-slide-to="0" class="active"&gt</li&gt
    <li data-target="#myCarousel" data-slide-to="1"&gt</li&gt
    <li data-target="#myCarousel" data-slide-to="2"&gt</li&gt
  </ol&gt
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
Heads up! When implementing this carousel, remove the images we have provided and replace them with your own.

Tabs

I'm in Section 1.

Howdy, I'm in Section 2.

Howdy, I'm in Section 3.

Howdy, I'm in Section 4.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Fade in tabs

To make tabs fade in, add .fade to each .tab-pane.

Modal

Launch demo modal 
&lt!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

&lt!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Progress Bars

 
 
 
  
<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Progress Bars Striped

 
 
 
  
<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Progress Bar Animated

  
<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Progress Bars Stacked

 
<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Font Awesome Icon Sets

Font Awesome Icons work with an i class and the icon name:

 <i class="fa fa-users"></i>
Example of american-sign-language-interpreting
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of audio-description
Example of blind
Example of braille
Example of deaf
Example of deafness (alias)
Example of envira
Example of gitlab
Example of glide
Example of glide-g
Example of hard-of-hearing (alias)
Example of low-vision
Example of question-circle-o
Example of sign-language
Example of signing (alias)
Example of snapchat
Example of snapchat-ghost
Example of snapchat-square
Example of universal-access
Example of viadeo
Example of viadeo-square
Example of volume-control-phone
Example of wheelchair-alt
Example of wpbeginner
Example of wpforms

Web Application Icons

Example of adjust
Example of american-sign-language-interpreting
Example of anchor
Example of archive
Example of area-chart
Example of arrows
Example of arrows-h
Example of arrows-v
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of asterisk
Example of at
Example of audio-description
Example of automobile (alias)
Example of balance-scale
Example of ban
Example of bank (alias)
Example of bar-chart
Example of bar-chart-o (alias)
Example of barcode
Example of bars
Example of battery-0 (alias)
Example of battery-1 (alias)
Example of battery-2 (alias)
Example of battery-3 (alias)
Example of battery-4 (alias)
Example of battery-empty
Example of battery-full
Example of battery-half
Example of battery-quarter
Example of battery-three-quarters
Example of bed
Example of beer
Example of bell
Example of bell-o
Example of bell-slash
Example of bell-slash-o
Example of bicycle
Example of binoculars
Example of birthday-cake
Example of blind
Example of bluetooth
Example of bluetooth-b
Example of bolt
Example of bomb
Example of book
Example of bookmark
Example of bookmark-o
Example of braille
Example of briefcase
Example of bug
Example of building
Example of building-o
Example of bullhorn
Example of bullseye
Example of bus
Example of cab (alias)
Example of calculator
Example of calendar
Example of calendar-check-o
Example of calendar-minus-o
Example of calendar-o
Example of calendar-plus-o
Example of calendar-times-o
Example of camera
Example of camera-retro
Example of car
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of cart-arrow-down
Example of cart-plus
Example of cc
Example of certificate
Example of check
Example of check-circle
Example of check-circle-o
Example of check-square
Example of check-square-o
Example of child
Example of circle
Example of circle-o
Example of circle-o-notch
Example of circle-thin
Example of clock-o
Example of clone
Example of close (alias)
Example of cloud
Example of cloud-download
Example of cloud-upload
Example of code
Example of code-fork
Example of coffee
Example of cog
Example of cogs
Example of comment
Example of comment-o
Example of commenting
Example of commenting-o
Example of comments
Example of comments-o
Example of compass
Example of copyright
Example of creative-commons
Example of credit-card
Example of credit-card-alt
Example of crop
Example of crosshairs
Example of cube
Example of cubes
Example of cutlery
Example of dashboard (alias)
Example of database
Example of deaf
Example of deafness (alias)
Example of desktop
Example of diamond
Example of dot-circle-o
Example of download
Example of edit (alias)
Example of ellipsis-h
Example of ellipsis-v
Example of envelope
Example of envelope-o
Example of envelope-square
Example of eraser
Example of exchange
Example of exclamation
Example of exclamation-circle
Example of exclamation-triangle
Example of external-link
Example of external-link-square
Example of eye
Example of eye-slash
Example of eyedropper
Example of fax
Example of feed (alias)
Example of female
Example of fighter-jet
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)
Example of film
Example of filter
Example of fire
Example of fire-extinguisher
Example of flag
Example of flag-checkered
Example of flag-o
Example of flash (alias)
Example of flask
Example of folder
Example of folder-o
Example of folder-open
Example of folder-open-o
Example of frown-o
Example of futbol-o
Example of gamepad
Example of gavel
Example of gear (alias)
Example of gears (alias)
Example of gift
Example of glass
Example of globe
Example of graduation-cap
Example of group (alias)
Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of hard-of-hearing (alias)
Example of hashtag
Example of hdd-o
Example of headphones
Example of heart
Example of heart-o
Example of heartbeat
Example of history
Example of home
Example of hotel (alias)
Example of hourglass
Example of hourglass-1 (alias)
Example of hourglass-2 (alias)
Example of hourglass-3 (alias)
Example of hourglass-end
Example of hourglass-half
Example of hourglass-o
Example of hourglass-start
Example of i-cursor
Example of image (alias)
Example of inbox
Example of industry
Example of info
Example of info-circle
Example of institution (alias)
Example of key
Example of keyboard-o
Example of language
Example of laptop
Example of leaf
Example of legal (alias)
Example of lemon-o
Example of level-down
Example of level-up
Example of life-bouy (alias)
Example of life-buoy (alias)
Example of life-ring
Example of life-saver (alias)
Example of lightbulb-o
Example of line-chart
Example of location-arrow
Example of lock
Example of low-vision
Example of magic
Example of magnet
Example of mail-forward (alias)
Example of mail-reply (alias)
Example of mail-reply-all (alias)
Example of male
Example of map
Example of map-marker
Example of map-o
Example of map-pin
Example of map-signs
Example of meh-o
Example of microphone
Example of microphone-slash
Example of minus
Example of minus-circle
Example of minus-square
Example of minus-square-o
Example of mobile
Example of mobile-phone (alias)
Example of money
Example of moon-o
Example of mortar-board (alias)
Example of motorcycle
Example of mouse-pointer
Example of music
Example of navicon (alias)
Example of newspaper-o
Example of object-group
Example of object-ungroup
Example of paint-brush
Example of paper-plane
Example of paper-plane-o
Example of paw
Example of pencil
Example of pencil-square
Example of pencil-square-o
Example of percent
Example of phone
Example of phone-square
Example of photo (alias)
Example of picture-o
Example of pie-chart
Example of plane
Example of plug
Example of plus
Example of plus-circle
Example of plus-square
Example of plus-square-o
Example of power-off
Example of print
Example of puzzle-piece
Example of qrcode
Example of question
Example of question-circle
Example of question-circle-o
Example of quote-left
Example of quote-right
Example of random
Example of recycle
Example of refresh
Example of registered
Example of remove (alias)
Example of reorder (alias)
Example of reply
Example of reply-all
Example of retweet
Example of road
Example of rocket
Example of rss
Example of rss-square
Example of search
Example of search-minus
Example of search-plus
Example of send (alias)
Example of send-o (alias)
Example of server
Example of share
Example of share-alt
Example of share-alt-square
Example of share-square
Example of share-square-o
Example of shield
Example of ship
Example of shopping-bag
Example of shopping-basket
Example of shopping-cart
Example of sign-in
Example of sign-language
Example of sign-out
Example of signal
Example of signing (alias)
Example of sitemap
Example of sliders
Example of smile-o
Example of soccer-ball-o (alias)
Example of sort
Example of sort-alpha-asc
Example of sort-alpha-desc
Example of sort-amount-asc
Example of sort-amount-desc
Example of sort-asc
Example of sort-desc
Example of sort-down (alias)
Example of sort-numeric-asc
Example of sort-numeric-desc
Example of sort-up (alias)
Example of space-shuttle
Example of spinner
Example of spoon
Example of square
Example of square-o
Example of star
Example of star-half
Example of star-half-empty (alias)
Example of star-half-full (alias)
Example of star-half-o
Example of star-o
Example of sticky-note
Example of sticky-note-o
Example of street-view
Example of suitcase
Example of sun-o
Example of support (alias)
Example of tablet
Example of tachometer
Example of tag
Example of tags
Example of tasks
Example of taxi
Example of television
Example of terminal
Example of thumb-tack
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up
Example of ticket
Example of times
Example of times-circle
Example of times-circle-o
Example of tint
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-off
Example of toggle-on
Example of toggle-right (alias)
Example of toggle-up (alias)
Example of trademark
Example of trash
Example of trash-o
Example of tree
Example of trophy
Example of truck
Example of tty
Example of tv (alias)
Example of umbrella
Example of universal-access
Example of university
Example of unlock
Example of unlock-alt
Example of unsorted (alias)
Example of upload
Example of user
Example of user-plus
Example of user-secret
Example of user-times
Example of users
Example of video-camera
Example of volume-control-phone
Example of volume-down
Example of volume-off
Example of volume-up
Example of warning (alias)
Example of wheelchair
Example of wheelchair-alt
Example of wifi
Example of wrench

Accessibility Icons

Example of american-sign-language-interpreting
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of audio-description
Example of blind
Example of braille
Example of cc
Example of deaf
Example of deafness (alias)
Example of hard-of-hearing (alias)
Example of low-vision
Example of question-circle-o
Example of sign-language
Example of signing (alias)
Example of tty
Example of universal-access
Example of volume-control-phone
Example of wheelchair
Example of wheelchair-alt

Hand Icons

Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up

Transportation Icons

Example of ambulance
Example of automobile (alias)
Example of bicycle
Example of bus
Example of cab (alias)
Example of car
Example of fighter-jet
Example of motorcycle
Example of plane
Example of rocket
Example of ship
Example of space-shuttle
Example of subway
Example of taxi
Example of train
Example of truck
Example of wheelchair

Gender Icons

Example of genderless
Example of intersex (alias)
Example of mars
Example of mars-double
Example of mars-stroke
Example of mars-stroke-h
Example of mars-stroke-v
Example of mercury
Example of neuter
Example of transgender
Example of transgender-alt
Example of venus
Example of venus-double
Example of venus-mars

File Type Icons

Example of file
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-o
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-text
Example of file-text-o
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)

Spinner Icons

Example of circle-o-notch
Example of cog
Example of gear (alias)
Example of refresh
Example of spinner

Form Control Icons

Example of check-square
Example of check-square-o
Example of circle
Example of circle-o
Example of dot-circle-o
Example of minus-square
Example of minus-square-o
Example of plus-square
Example of plus-square-o
Example of square
Example of square-o

Payment Icons

Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of credit-card
Example of credit-card-alt
Example of google-wallet
Example of paypal

Chart Icons

Example of area-chart
Example of bar-chart
Example of bar-chart-o (alias)
Example of line-chart
Example of pie-chart

Currency Icons

Example of bitcoin (alias)
Example of btc
Example of cny (alias)
Example of dollar (alias)
Example of eur
Example of euro (alias)
Example of gbp
Example of gg
Example of gg-circle
Example of ils
Example of inr
Example of jpy
Example of krw
Example of money
Example of rmb (alias)
Example of rouble (alias)
Example of rub
Example of ruble (alias)
Example of rupee (alias)
Example of shekel (alias)
Example of sheqel (alias)
Example of try
Example of turkish-lira (alias)
Example of usd
Example of won (alias)
Example of yen (alias)

Text Editor Icons

Example of align-center
Example of align-justify
Example of align-left
Example of align-right
Example of bold
Example of chain (alias)
Example of chain-broken
Example of clipboard
Example of columns
Example of copy (alias)
Example of cut (alias)
Example of dedent (alias)
Example of eraser
Example of file
Example of file-o
Example of file-text
Example of file-text-o
Example of files-o
Example of floppy-o
Example of font
Example of header
Example of indent
Example of italic
Example of link
Example of list
Example of list-alt
Example of list-ol
Example of list-ul
Example of outdent
Example of paperclip
Example of paragraph
Example of paste (alias)
Example of repeat
Example of rotate-left (alias)
Example of rotate-right (alias)
Example of save (alias)
Example of scissors
Example of strikethrough
Example of subscript
Example of superscript
Example of table
Example of text-height
Example of text-width
Example of th
Example of th-large
Example of th-list
Example of underline
Example of undo
Example of unlink (alias)

Directional Icons

Example of angle-double-down
Example of angle-double-left
Example of angle-double-right
Example of angle-double-up
Example of angle-down
Example of angle-left
Example of angle-right
Example of angle-up
Example of arrow-circle-down
Example of arrow-circle-left
Example of arrow-circle-o-down
Example of arrow-circle-o-left
Example of arrow-circle-o-right
Example of arrow-circle-o-up
Example of arrow-circle-right
Example of arrow-circle-up
Example of arrow-down
Example of arrow-left
Example of arrow-right
Example of arrow-up
Example of arrows
Example of arrows-alt
Example of arrows-h
Example of arrows-v
Example of caret-down
Example of caret-left
Example of caret-right
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of caret-up
Example of chevron-circle-down
Example of chevron-circle-left
Example of chevron-circle-right
Example of chevron-circle-up
Example of chevron-down
Example of chevron-left
Example of chevron-right
Example of chevron-up
Example of exchange
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of long-arrow-down
Example of long-arrow-left
Example of long-arrow-right
Example of long-arrow-up
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-right (alias)
Example of toggle-up (alias)

Video Player Icons

Example of arrows-alt
Example of backward
Example of compress
Example of eject
Example of expand
Example of fast-backward
Example of fast-forward
Example of forward
Example of pause
Example of pause-circle
Example of pause-circle-o
Example of play
Example of play-circle
Example of play-circle-o
Example of random
Example of step-backward
Example of step-forward
Example of stop
Example of stop-circle
Example of stop-circle-o
Example of youtube-play

Brand Icons

Example of 500px
Example of adn
Example of amazon
Example of android
Example of angellist
Example of apple
Example of behance
Example of behance-square
Example of bitbucket
Example of bitbucket-square
Example of bitcoin (alias)
Example of black-tie
Example of bluetooth
Example of bluetooth-b
Example of btc
Example of buysellads
Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of chrome
Example of codepen
Example of codiepie
Example of connectdevelop
Example of contao
Example of css3
Example of dashcube
Example of delicious
Example of deviantart
Example of digg
Example of dribbble
Example of dropbox
Example of drupal
Example of edge
Example of empire
Example of envira
Example of expeditedssl
Example of facebook
Example of facebook-f (alias)
Example of facebook-official
Example of facebook-square
Example of firefox
Example of flickr
Example of fonticons
Example of fort-awesome
Example of forumbee
Example of foursquare
Example of ge (alias)
Example of get-pocket
Example of gg
Example of gg-circle
Example of git
Example of git-square
Example of github
Example of github-alt
Example of github-square
Example of gitlab
Example of gittip (alias)
Example of glide
Example of glide-g
Example of google
Example of google-plus
Example of google-plus-square
Example of google-wallet
Example of gratipay
Example of hacker-news
Example of houzz
Example of html5
Example of instagram
Example of internet-explorer
Example of ioxhost
Example of joomla
Example of jsfiddle
Example of lastfm
Example of lastfm-square
Example of leanpub
Example of linkedin
Example of linkedin-square
Example of linux
Example of maxcdn
Example of meanpath
Example of medium
Example of mixcloud
Example of modx
Example of odnoklassniki
Example of odnoklassniki-square
Example of opencart
Example of openid
Example of opera
Example of optin-monster
Example of pagelines
Example of paypal
Example of pied-piper
Example of pied-piper-alt
Example of pinterest
Example of pinterest-p
Example of pinterest-square
Example of product-hunt
Example of qq
Example of ra (alias)
Example of rebel
Example of reddit
Example of reddit-alien
Example of reddit-square
Example of renren
Example of safari
Example of scribd
Example of sellsy
Example of share-alt
Example of share-alt-square
Example of shirtsinbulk
Example of simplybuilt
Example of skyatlas
Example of skype
Example of slack
Example of slideshare
Example of snapchat
Example of snapchat-ghost
Example of snapchat-square
Example of soundcloud
Example of spotify
Example of stack-exchange
Example of stack-overflow
Example of steam
Example of steam-square
Example of stumbleupon
Example of stumbleupon-circle
Example of tencent-weibo
Example of trello
Example of tripadvisor
Example of tumblr
Example of tumblr-square
Example of twitch
Example of twitter
Example of twitter-square
Example of usb
Example of viacoin
Example of viadeo
Example of viadeo-square
Example of vimeo
Example of vimeo-square
Example of vine
Example of vk
Example of wechat (alias)
Example of weibo
Example of weixin
Example of whatsapp
Example of wikipedia-w
Example of windows
Example of wordpress
Example of wpbeginner
Example of wpforms
Example of xing
Example of xing-square
Example of y-combinator
Example of y-combinator-square (alias)
Example of yahoo
Example of yc (alias)
Example of yc-square (alias)
Example of yelp
Example of youtube
Example of youtube-play
Example of youtube-square
  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
  • Brand icons should only be used to represent the company or product to which they refer.

Medical Icons

Example of ambulance
Example of h-square
Example of heart
Example of heart-o
Example of heartbeat
Example of hospital-o
Example of medkit
Example of plus-square
Example of stethoscope
Example of user-md
Example of wheelchair
  1. 404 Error
  2. 403 Error