Icons


        <!-- icon --> 
        <i class="fa fa-search"></i>

    <!-- social icon --> 
    <ul class="social-icon" >
        <a href="#"> 
            <i class="ti-facebook"></i> 
        </a> 
        <a href="#"> 
            <i class="ti-twitter-alt"></i> 
        </a> 
        <a href="#"> 
            <i class="ti-linkedin"></i> 
        </a> 
        <a href="#"> 
            <i class="ti-google"></i> 
        </a>
    </ul>
    
    <!-- social icon --> 
    <ul class="social-icon-alt" >
        <a href="#"> 
            <i class="ti-facebook"></i> 
        </a> 
        <a href="#"> 
            <i class="ti-twitter-alt"></i> 
        </a> 
        <a href="#"> 
            <i class="ti-linkedin"></i> 
        </a> 
        <a href="#"> 
            <i class="ti-google"></i> 
        </a>
    </ul>

                                
How to Use

Use any icon (here uses Fontawesome icon) into an <i> element

Use the icon name afterfa fa- in a class of <i>tag. For example: <i class="fa fa-search">

Add icon-xs class for extra small size icon

Add icon-sm class for small size icon

Add icon class for normal size icon

Add icon-lg class for large size icon

For social icon add an .social-icon class in <ul> tag

For alternative social icon add an .social-icon-alt class in <ul> tag

  • address-book
  • address-book-o
  • address-card
  • address-card-o
  • bandcamp
  • bath
  • bathtub (alias)
  • drivers-license (alias)
  • drivers-license-o (alias)
  • eercast
  • envelope-open
  • envelope-open-o
  • etsy
  • free-code-camp
  • grav
  • handshake-o
  • id-badge
  • id-card
  • id-card-o
  • imdb
  • linode
  • meetup
  • microchip
  • podcast
  • quora
  • ravelry
  • s15 (alias)
  • shower
  • snowflake-o
  • superpowers
  • telegram
  • thermometer (alias)
  • thermometer-0 (alias)
  • thermometer-1 (alias)
  • thermometer-2 (alias)
  • thermometer-3 (alias)
  • thermometer-4 (alias)
  • thermometer-empty
  • thermometer-full
  • thermometer-half
  • thermometer-quarter
  • thermometer-three-quarters
  • times-rectangle (alias)
  • times-rectangle-o (alias)
  • user-circle
  • user-circle-o
  • user-o
  • vcard (alias)
  • vcard-o (alias)
  • window-close
  • window-close-o
  • window-maximize
  • window-minimize
  • window-restore
  • wpexplorer
  • address-book
  • address-book-o
  • address-card
  • address-card-o
  • adjust
  • american-sign-language-interpreting
  • anchor
  • archive
  • area-chart
  • arrows
  • arrows-h
  • arrows-v
  • asl-interpreting (alias)
  • assistive-listening-systems
  • asterisk
  • Example of at
  • audio-description
  • automobile (alias)
  • balance-scale
  • Example of ban
  • bank (alias)
  • bar-chart
  • bar-chart-o (alias)
  • barcode
  • bars
  • bath
  • bathtub (alias)
  • battery (alias)
  • battery-0 (alias)
  • battery-1 (alias)
  • battery-2 (alias)
  • battery-3 (alias)
  • battery-4 (alias)
  • battery-empty
  • battery-full
  • battery-half
  • battery-quarter
  • battery-three-quarters
  • Example of bed
  • beer
  • bell
  • bell-o
  • bell-slash
  • bell-slash-o
  • bicycle
  • binoculars
  • birthday-cake
  • blind
  • bluetooth
  • bluetooth-b
  • bolt
  • bomb
  • book
  • bookmark
  • bookmark-o
  • braille
  • briefcase
  • Example of bug
  • building
  • building-o
  • bullhorn
  • bullseye
  • Example of bus
  • Example of cab (alias)
  • calculator
  • calendar
  • calendar-check-o
  • calendar-minus-o
  • calendar-o
  • calendar-plus-o
  • calendar-times-o
  • camera
  • camera-retro
  • Example of car
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • cart-arrow-down
  • cart-plus
  • Example of cc
  • certificate
  • check
  • check-circle
  • check-circle-o
  • check-square
  • check-square-o
  • child
  • circle
  • circle-o
  • circle-o-notch
  • circle-thin
  • clock-o
  • clone
  • close (alias)
  • cloud
  • cloud-download
  • cloud-upload
  • code
  • code-fork
  • coffee
  • Example of cog
  • cogs
  • comment
  • comment-o
  • commenting
  • commenting-o
  • comments
  • comments-o
  • compass
  • copyright
  • creative-commons
  • credit-card
  • credit-card-alt
  • crop
  • crosshairs
  • cube
  • cubes
  • cutlery
  • dashboard (alias)
  • database
  • deaf
  • deafness (alias)
  • desktop
  • diamond
  • dot-circle-o
  • download
  • drivers-license (alias)
  • drivers-license-o (alias)
  • edit (alias)
  • ellipsis-h
  • ellipsis-v
  • envelope
  • envelope-o
  • envelope-open
  • envelope-open-o
  • envelope-square
  • eraser
  • exchange
  • exclamation
  • exclamation-circle
  • exclamation-triangle
  • external-link
  • external-link-square
  • Example of eye
  • eye-slash
  • eyedropper
  • Example of fax
  • Example of feed (alias)
  • female
  • fighter-jet
  • file-archive-o
  • file-audio-o
  • file-code-o
  • file-excel-o
  • file-image-o
  • file-movie-o (alias)
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-video-o
  • file-word-o
  • file-zip-o (alias)
  • film
  • filter
  • fire
  • fire-extinguisher
  • flag
  • flag-checkered
  • flag-o
  • flash (alias)
  • flask
  • folder
  • folder-o
  • folder-open
  • folder-open-o
  • frown-o
  • futbol-o
  • gamepad
  • gavel
  • Example of gear (alias)
  • gears (alias)
  • gift
  • glass
  • globe
  • graduation-cap
  • group (alias)
  • hand-grab-o (alias)
  • hand-lizard-o
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • hand-stop-o (alias)
  • handshake-o
  • hard-of-hearing (alias)
  • hashtag
  • hdd-o
  • headphones
  • heart
  • heart-o
  • heartbeat
  • history
  • home
  • hotel (alias)
  • hourglass
  • hourglass-1 (alias)
  • hourglass-2 (alias)
  • hourglass-3 (alias)
  • hourglass-end
  • hourglass-half
  • hourglass-o
  • hourglass-start
  • i-cursor
  • id-badge
  • id-card
  • id-card-o
  • image (alias)
  • inbox
  • industry
  • info
  • info-circle
  • institution (alias)
  • Example of key
  • keyboard-o
  • language
  • laptop
  • leaf
  • legal (alias)
  • lemon-o
  • level-down
  • level-up
  • life-bouy (alias)
  • life-buoy (alias)
  • life-ring
  • life-saver (alias)
  • lightbulb-o
  • line-chart
  • location-arrow
  • lock
  • low-vision
  • magic
  • magnet
  • mail-forward (alias)
  • mail-reply (alias)
  • mail-reply-all (alias)
  • male
  • Example of map
  • map-marker
  • map-o
  • map-pin
  • map-signs
  • meh-o
  • microchip
  • microphone
  • microphone-slash
  • minus
  • minus-circle
  • minus-square
  • minus-square-o
  • mobile
  • mobile-phone (alias)
  • money
  • moon-o
  • mortar-board (alias)
  • motorcycle
  • mouse-pointer
  • music
  • navicon (alias)
  • newspaper-o
  • object-group
  • object-ungroup
  • paint-brush
  • paper-plane
  • paper-plane-o
  • Example of paw
  • pencil
  • pencil-square
  • pencil-square-o
  • percent
  • phone
  • phone-square
  • photo (alias)
  • picture-o
  • pie-chart
  • plane
  • plug
  • plus
  • plus-circle
  • plus-square
  • plus-square-o
  • podcast
  • power-off
  • print
  • puzzle-piece
  • qrcode
  • question
  • question-circle
  • question-circle-o
  • quote-left
  • quote-right
  • random
  • recycle
  • refresh
  • registered
  • remove (alias)
  • reorder (alias)
  • reply
  • reply-all
  • retweet
  • road
  • rocket
  • Example of rss
  • rss-square
  • Example of s15 (alias)
  • search
  • search-minus
  • search-plus
  • send (alias)
  • send-o (alias)
  • server
  • share
  • share-alt
  • share-alt-square
  • share-square
  • share-square-o
  • shield
  • ship
  • shopping-bag
  • shopping-basket
  • shopping-cart
  • shower
  • sign-in
  • sign-language
  • sign-out
  • signal
  • signing (alias)
  • sitemap
  • sliders
  • smile-o
  • snowflake-o
  • soccer-ball-o (alias)
  • sort
  • sort-alpha-asc
  • sort-alpha-desc
  • sort-amount-asc
  • sort-amount-desc
  • sort-asc
  • sort-desc
  • sort-down (alias)
  • sort-numeric-asc
  • sort-numeric-desc
  • sort-up (alias)
  • space-shuttle
  • spinner
  • spoon
  • square
  • square-o
  • star
  • star-half
  • star-half-empty (alias)
  • star-half-full (alias)
  • star-half-o
  • star-o
  • sticky-note
  • sticky-note-o
  • street-view
  • suitcase
  • sun-o
  • support (alias)
  • tablet
  • tachometer
  • Example of tag
  • tags
  • tasks
  • taxi
  • television
  • terminal
  • thermometer (alias)
  • thermometer-0 (alias)
  • thermometer-1 (alias)
  • thermometer-2 (alias)
  • thermometer-3 (alias)
  • thermometer-4 (alias)
  • thermometer-empty
  • thermometer-full
  • thermometer-half
  • thermometer-quarter
  • thermometer-three-quarters
  • thumb-tack
  • thumbs-down
  • thumbs-o-down
  • thumbs-o-up
  • thumbs-up
  • ticket
  • times
  • times-circle
  • times-circle-o
  • times-rectangle (alias)
  • times-rectangle-o (alias)
  • tint
  • toggle-down (alias)
  • toggle-left (alias)
  • toggle-off
  • toggle-on
  • toggle-right (alias)
  • toggle-up (alias)
  • trademark
  • trash
  • trash-o
  • tree
  • trophy
  • truck
  • Example of tty
  • tv (alias)
  • umbrella
  • universal-access
  • university
  • unlock
  • unlock-alt
  • unsorted (alias)
  • upload
  • user
  • user-circle
  • user-circle-o
  • user-o
  • user-plus
  • user-secret
  • user-times
  • users
  • vcard (alias)
  • vcard-o (alias)
  • video-camera
  • volume-control-phone
  • volume-down
  • volume-off
  • volume-up
  • warning (alias)
  • wheelchair
  • wheelchair-alt
  • wifi
  • window-close
  • window-close-o
  • window-maximize
  • window-minimize
  • window-restore
  • wrench
  • american-sign-language-interpreting
  • asl-interpreting (alias)
  • assistive-listening-systems
  • audio-description
  • blind
  • braille
  • Example of cc
  • deaf
  • deafness (alias)
  • hard-of-hearing (alias)
  • low-vision
  • question-circle-o
  • sign-language
  • signing (alias)
  • Example of tty
  • universal-access
  • volume-control-phone
  • wheelchair"> wheelchair
  • wheelchair-alt
  • hand-grab-o (alias)
  • hand-lizard-o
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • hand-stop-o (alias)
  • thumbs-down
  • thumbs-o-down
  • thumbs-o-up
  • thumbs-up
  • ambulance
  • automobile (alias)
  • bicycle
  • Example of bus
  • Example of cab (alias)
  • Example of car
  • fighter-jet
  • motorcycle
  • plane
  • rocket
  • ship
  • space-shuttle
  • subway
  • taxi
  • train
  • truck
  • wheelchair
  • wheelchair-alt
  • genderless
  • intersex (alias)
  • mars
  • mars-double
  • mars-stroke
  • mars-stroke-h
  • mars-stroke-v
  • mercury
  • neuter
  • transgender
  • transgender-alt
  • venus
  • venus-double
  • venus-mars
  • file
  • file-archive-o
  • file-audio-o
  • file-code-o
  • file-excel-o
  • file-image-o
  • file-movie-o (alias)
  • file-o
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-text
  • file-text-o
  • file-video-o
  • file-word-o
  • file-zip-o (alias)
  • circle-o-notch
  • Example of cog
  • Example of gear (alias)
  • refresh
  • spinner
  • check-square
  • check-square-o
  • circle
  • circle-o
  • dot-circle-o
  • minus-square
  • minus-square-o
  • plus-square
  • plus-square-o
  • square
  • square-o
  • cc-amex
  • cc-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • credit-card
  • credit-card-alt
  • google-wallet
  • paypal
  • area-chart
  • bar-chart
  • bar-chart-o (alias)
  • line-chart
  • pie-chart
  • bitcoin (alias)
  • Example of btc
  • Example of cny (alias)
  • dollar (alias)
  • Example of eur
  • Example of euro (alias)
  • Example of gbp
  • Example of gg
  • gg-circle
  • Example of ils
  • Example of inr
  • Example of jpy
  • Example of krw
  • money
  • Example of rmb (alias)
  • rouble (alias)
  • Example of rub
  • ruble (alias)
  • rupee (alias)
  • shekel (alias)
  • sheqel (alias)
  • Example of try
  • turkish-lira (alias)
  • Example of usd
  • viacoin
  • Example of won (alias)
  • Example of yen (alias)
  • align-center
  • align-justify
  • align-left
  • align-right
  • bold
  • chain (alias)
  • chain-broken
  • clipboard
  • columns
  • copy (alias)
  • cut (alias)
  • dedent (alias)
  • eraser
  • file
  • file-o
  • file-text
  • file-text-o
  • files-o
  • floppy-o
  • font
  • header
  • indent
  • italic
  • link
  • list
  • list-alt
  • list-ol
  • list-ul
  • outdent
  • paperclip
  • paragraph
  • paste (alias)
  • repeat
  • rotate-left (alias)
  • rotate-right (alias)
  • save (alias)
  • scissors
  • strikethrough
  • subscript
  • superscript
  • table
  • text-height
  • text-width
  • Example of th
  • th-large
  • th-list
  • underline
  • undo
  • unlink (alias)
  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • arrow-circle-down
  • arrow-circle-left
  • arrow-circle-o-down
  • arrow-circle-o-left
  • arrow-circle-o-right
  • arrow-circle-o-up
  • arrow-circle-right
  • arrow-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows
  • arrows-alt
  • arrows-h
  • arrows-v
  • caret-down
  • caret-left
  • caret-right
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • caret-up
  • chevron-circle-down
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • exchange
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • > toggle-down (alias)
  • toggle-left (alias)
  • toggle-right (alias)
  • toggle-up (alias)
  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • arrow-circle-down
  • arrow-circle-left
  • arrow-circle-o-down
  • arrow-circle-o-left
  • arrow-circle-o-right
  • arrow-circle-o-up
  • arrow-circle-right
  • arrow-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows
  • arrows-alt
  • arrows-h
  • arrows-v
  • caret-down
  • caret-left
  • caret-right
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • caret-up
  • chevron-circle-down
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • exchange
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • toggle-down (alias)
  • toggle-left (alias)
  • toggle-right (alias)
  • toggle-up (alias)
  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • arrow-circle-down
  • arrow-circle-left
  • arrow-circle-o-down
  • arrow-circle-o-left
  • arrow-circle-o-right
  • arrow-circle-o-up
  • arrow-circle-right
  • arrow-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows
  • arrows-alt
  • arrows-h
  • arrows-v
  • caret-down
  • caret-left
  • caret-right
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • caret-up
  • chevron-circle-down
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • exchange
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • toggle-down (alias)
  • toggle-left (alias)
  • toggle-right (alias)
  • toggle-up (alias)
  • ambulance
  • h-square
  • heart
  • heart-o
  • heartbeat
  • hospital-o
  • medkit
  • plus-square
  • stethoscope
  • user-md
  • wheelchair
  • wheelchair-alt