First there is no difference as such in HTML4/5 lists as far as my knowledge goes. They render the same way so the title of this post is not misleading but I am just trying to stay up with the latest 🙂
Anyway this post shows how to use Font Awesome in your Ordered or Unordered lists.
The result will look like this
First things first, if your browser does not support CSS pseudo classes then this approach will not work. You will be glad to hear that most of the latest browsers including Chrome, IE, Firefox supports them. If you have don’t know what pseudo classes are then go look at this little tutorial http://www.w3schools.com/css/css_pseudo_classes.asp
Anyway lets get back on track and see how the above is done.
I assume that you correctly have included bootstrap, font awesome files on your HTML5 page.
The Markup
1 2 3 4 5 6 7 8 9 |
<ul class="ul-fa"> <li><a href="#">Installation Guide</a></li> <li><a href="#">Whitepaper 1</a></li> <li><a href="#">Whitepaper 2</a></li> <li><a href="#">Whitepaper 3</a></li> <li><a href="#">Administration Whitepaper</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">More Documentation</a></li> </ul> |
above is really basic markup that is required. I’ve added more lines just so it looks nice in the end.
Now lets take a look at our CSS
The CSS
Here is the CSS that is required to give us the required result.
1 2 3 4 5 6 7 8 9 10 |
.ul-fa li { list-style: none; } .ul-fa li:before { content: '\f105'; /*>*/ font-family: FontAwesome; margin-left: -1.1em; display: inline-block; width: 1.1em; }​ |
The most important bit in the above CSS is the use of psedo class :before and content that should go before each list item.
Demo
http://jaspreetchahal.org/examples/font-awesome-list.html
A near full list of content values is pro
Font Awesome Content Values – Quick reference – Without icons though
Here is the Content values of icon- fonts, To integrate check this page out http://fortawesome.github.io/Font-Awesome/#integration
- icon-glass –> “\f000”
- icon-music –> “\f001”
- icon-search –> “\f002”
- icon-envelope –> “\f003”
- icon-heart –> “\f004”
- icon-star –> “\f005”
- icon-star-empty –> “\f006”
- icon-user –> “\f007”
- icon-film –> “\f008”
- icon-th-large –> “\f009”
- icon-th –> “\f00a”
- icon-th-list –> “\f00b”
- icon-ok –> “\f00c”
- icon-remove –> “\f00d”
- icon-zoom-in –> “\f00e”
- icon-zoom-out –> “\f010”
- icon-off –> “\f011”
- icon-signal –> “\f012”
- icon-cog –> “\f013”
- icon-trash –> “\f014”
- icon-home –> “\f015”
- icon-file –> “\f016”
- icon-time –> “\f017”
- icon-road –> “\f018”
- icon-download-alt –> “\f019”
- icon-download –> “\f01a”
- icon-upload –> “\f01b”
- icon-inbox –> “\f01c”
- icon-play-circle –> “\f01d”
- icon-repeat –> “\f01e”
- icon-refresh –> “\f021”
- icon-list-alt –> “\f022”
- icon-lock –> “\f023”
- icon-flag –> “\f024”
- icon-headphones –> “\f025”
- icon-volume-off –> “\f026”
- icon-volume-down –> “\f027”
- icon-volume-up –> “\f028”
- icon-qrcode –> “\f029”
- icon-barcode –> “\f02a”
- icon-tag –> “\f02b”
- icon-tags –> “\f02c”
- icon-book –> “\f02d”
- icon-bookmark –> “\f02e”
- icon-print –> “\f02f”
- icon-camera –> “\f030”
- icon-font –> “\f031”
- icon-bold –> “\f032”
- icon-italic –> “\f033”
- icon-text-height –> “\f034”
- icon-text-width –> “\f035”
- icon-align-left –> “\f036”
- icon-align-center –> “\f037”
- icon-align-right –> “\f038”
- icon-align-justify –> “\f039”
- icon-list –> “\f03a”
- icon-indent-left –> “\f03b”
- icon-indent-right –> “\f03c”
- icon-facetime-video –> “\f03d”
- icon-picture –> “\f03e”
- icon-pencil –> “\f040”
- icon-map-marker –> “\f041”
- icon-adjust –> “\f042”
- icon-tint –> “\f043”
- icon-edit –> “\f044”
- icon-share –> “\f045”
- icon-check –> “\f046”
- icon-move –> “\f047”
- icon-step-backward –> “\f048”
- icon-fast-backward –> “\f049”
- icon-backward –> “\f04a”
- icon-play –> “\f04b”
- icon-pause –> “\f04c”
- icon-stop –> “\f04d”
- icon-forward –> “\f04e”
- icon-fast-forward –> “\f050”
- icon-step-forward –> “\f051”
- icon-eject –> “\f052”
- icon-chevron-left –> “\f053”
- icon-chevron-right –> “\f054”
- icon-plus-sign –> “\f055”
- icon-minus-sign –> “\f056”
- icon-remove-sign –> “\f057”
- icon-ok-sign –> “\f058”
- icon-question-sign –> “\f059”
- icon-info-sign –> “\f05a”
- icon-screenshot –> “\f05b”
- icon-remove-circle –> “\f05c”
- icon-ok-circle –> “\f05d”
- icon-ban-circle –> “\f05e”
- icon-arrow-left –> “\f060”
- icon-arrow-right –> “\f061”
- icon-arrow-up –> “\f062”
- icon-arrow-down –> “\f063”
- icon-share-alt –> “\f064”
- icon-resize-full –> “\f065”
- icon-resize-small –> “\f066”
- icon-plus –> “\f067”
- icon-minus –> “\f068”
- icon-asterisk –> “\f069”
- icon-exclamation-sign –> “\f06a”
- icon-gift –> “\f06b”
- icon-leaf –> “\f06c”
- icon-fire –> “\f06d”
- icon-eye-open –> “\f06e”
- icon-eye-close –> “\f070”
- icon-warning-sign –> “\f071”
- icon-plane –> “\f072”
- icon-calendar –> “\f073”
- icon-random –> “\f074”
- icon-comment –> “\f075”
- icon-magnet –> “\f076”
- icon-chevron-up –> “\f077”
- icon-chevron-down –> “\f078”
- icon-retweet –> “\f079”
- icon-shopping-cart –> “\f07a”
- icon-folder-close –> “\f07b”
- icon-folder-open –> “\f07c”
- icon-resize-vertical –> “\f07d”
- icon-resize-horizontal –> “\f07e”
- icon-bar-chart –> “\f080”
- icon-twitter-sign –> “\f081”
- icon-facebook-sign –> “\f082”
- icon-camera-retro –> “\f083”
- icon-key –> “\f084”
- icon-cogs –> “\f085”
- icon-comments –> “\f086”
- icon-thumbs-up –> “\f087”
- icon-thumbs-down –> “\f088”
- icon-star-half –> “\f089”
- icon-heart-empty –> “\f08a”
- icon-signout –> “\f08b”
- icon-linkedin-sign –> “\f08c”
- icon-pushpin –> “\f08d”
- icon-external-link –> “\f08e”
- icon-signin –> “\f090”
- icon-trophy –> “\f091”
- icon-github-sign –> “\f092”
- icon-upload-alt –> “\f093”
- icon-lemon –> “\f094”
- icon-phone –> “\f095”
- icon-check-empty –> “\f096”
- icon-bookmark-empty –> “\f097”
- icon-phone-sign –> “\f098”
- icon-twitter –> “\f099”
- icon-facebook –> “\f09a”
- icon-github –> “\f09b”
- icon-unlock –> “\f09c”
- icon-credit-card –> “\f09d”
- icon-rss –> “\f09e”
- icon-hdd –> “\f0a0”
- icon-bullhorn –> “\f0a1”
- icon-bell –> “\f0a2”
- icon-certificate –> “\f0a3”
- icon-hand-right –> “\f0a4”
- icon-hand-left –> “\f0a5”
- icon-hand-up –> “\f0a6”
- icon-hand-down –> “\f0a7”
- icon-circle-arrow-left –> “\f0a8”
- icon-circle-arrow-right –> “\f0a9”
- icon-circle-arrow-up –> “\f0aa”
- icon-circle-arrow-down –> “\f0ab”
- icon-globe –> “\f0ac”
- icon-wrench –> “\f0ad”
- icon-tasks –> “\f0ae”
- icon-filter –> “\f0b0”
- icon-briefcase –> “\f0b1”
- icon-fullscreen –> “\f0b2”
- icon-group –> “\f0c0”
- icon-link –> “\f0c1”
- icon-cloud –> “\f0c2”
- icon-beaker –> “\f0c3”
- icon-cut –> “\f0c4”
- icon-copy –> “\f0c5”
- icon-paper-clip –> “\f0c6”
- icon-save –> “\f0c7”
- icon-sign-blank –> “\f0c8”
- icon-reorder –> “\f0c9”
- icon-list-ul –> “\f0ca”
- icon-list-ol –> “\f0cb”
- icon-strikethrough –> “\f0cc”
- icon-underline –> “\f0cd”
- icon-table –> “\f0ce”
- icon-magic –> “\f0d0”
- icon-truck –> “\f0d1”
- icon-pinterest –> “\f0d2”
- icon-pinterest-sign –> “\f0d3”
- icon-google-plus-sign –> “\f0d4”
- icon-google-plus –> “\f0d5”
- icon-money –> “\f0d6”
- icon-caret-down –> “\f0d7”
- icon-caret-up –> “\f0d8”
- icon-caret-left –> “\f0d9”
- icon-caret-right –> “\f0da”
- icon-columns –> “\f0db”
- icon-sort –> “\f0dc”
- icon-sort-down –> “\f0dd”
- icon-sort-up –> “\f0de”
- icon-envelope-alt –> “\f0e0”
- icon-linkedin –> “\f0e1”
- icon-undo –> “\f0e2”
- icon-legal –> “\f0e3”
- icon-dashboard –> “\f0e4”
- icon-comment-alt –> “\f0e5”
- icon-comments-alt –> “\f0e6”
- icon-bolt –> “\f0e7”
- icon-sitemap –> “\f0e8”
- icon-umbrella –> “\f0e9”
- icon-paste –> “\f0ea”
- icon-lightbulb –> “\f0eb”
- icon-exchange –> “\f0ec”
- icon-cloud-download –> “\f0ed”
- icon-cloud-upload –> “\f0ee”
- icon-user-md –> “\f0f0”
- icon-stethoscope –> “\f0f1”
- icon-suitcase –> “\f0f2”
- icon-bell-alt –> “\f0f3”
- icon-coffee –> “\f0f4”
- icon-food –> “\f0f5”
- icon-file-alt –> “\f0f6”
- icon-building –> “\f0f7”
- icon-hospital –> “\f0f8”
- icon-ambulance –> “\f0f9”
- icon-medkit –> “\f0fa”
- icon-fighter-jet –> “\f0fb”
- icon-beer –> “\f0fc”
- icon-h-sign –> “\f0fd”
- icon-plus-sign-alt –> “\f0fe”
- icon-double-angle-left –> “\f100”
- icon-double-angle-right –> “\f101”
- icon-double-angle-up –> “\f102”
- icon-double-angle-down –> “\f103”
- icon-angle-left –> “\f104”
- icon-angle-right –> “\f105”
- icon-angle-up –> “\f106”
- icon-angle-down –> “\f107”
- icon-desktop –> “\f108”
- icon-laptop –> “\f109”
- icon-tablet –> “\f10a”
- icon-mobile-phone –> “\f10b”
- icon-circle-blank –> “\f10c”
- icon-quote-left –> “\f10d”
- icon-quote-right –> “\f10e”
- icon-spinner –> “\f110”
- icon-circle –> “\f111”
- icon-reply –> “\f112”
- icon-github-alt –> “\f113”
- icon-folder-close-alt –> “\f114”
- icon-folder-open-alt –> “\f115”
I hope this helps
Cheers.
Leave a Reply