We put together with the help of Fontastic a list of over 2130 icons and made a font for you to use in your design.
We provide over 1500 icons and bellow you can see a sample of those icons and the coresponding Name to use.
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
{icon-fa name="fa-heart" size="fa-3x" color="color-theme"} Possible Values for size: fa-lg fa-2x fa-3x fa-4x fa-5x Possible Values for color: color-text color-theme color-dark color-grey color-success color-info color-warning color-danger color-white
{icon-round-border size="3x" color="color-text"} {icon-fa name="fa-building-o"} {/icon} {icon-round-full size="3x" bgcolor="color-theme" color="color-white"} {icon-fa name="fa-apple"} {/icon} {icon-square-border size="3x" color="color-text"} {icon-fa name="fa-bomb"} {/icon} {icon-square-full size="3x" bgcolor="color-theme" color="color-white"} {icon-fa name="fa-space-shuttle"} {/con} Possible Values for size: 1x 2x 3x Possible Values for color (also Background): color-text color-default color-dark color-grey color-success color-info color-warning color-danger color-white
Build simple and elegant icon boxes in easy steps. All the styles bellow can be combined as you think is better for your design.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
{iconbox} {icon-round-full bgcolor="color-grey" color="color-danger"} {icon-fa name="fa-heart"} {/icon} {iconbox-content} {h4 class="bold"}Simple Iconbox{/h4} Content of the Box here {/iconbox}
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
{iconbox style="vertical"} {icon-square-full size="2x" bgcolor="color-warning" color="color-white"} {icon-fa name="fa-space-shuttle"} {/icon} {iconbox-content} {h4 class="bold"}Simple Iconbox{/h4} Content of the Box here {/iconbox}
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
{iconbox style="vertical"} {icon-livicon name="briefcase" size="80" color="#F7505A" colorhover="#F7505A" animate="true" loop="false" iteration="1" duration="auto" onparent="true"} {iconbox-content} {h4 class="bold"}Simple Iconbox{/h4} Content of the Box here {/iconbox}
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreTurpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreTurpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn More{iconbox-panel bgcolor="color-success"} {icon-livicon name="briefcase" size="80" color="#fff" colorhover="#fff" animate="true" loop="false" iteration="1" duration="auto" onparent="true"} {iconbox-content} {h4 class="bold" color="color-white"}Simple Iconbox{/h4} Content of the Box here {/iconbox-panel}
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreTurpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreTurpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn More{iconbox-panel bgcolor="color-success"} {icon-square-border color="color-white" size="2x"} {icon-fa name="fa-heart"} {/icon} {iconbox-content} {h4 class="bold" color="color-white"}Simple Iconbox{/h4} Content of the Box here {/iconbox-panel}
Livicons are Over 350 Icons animated vector icons (except brand names ones), so there are not any images like JPGs, PNGs or GIFs. All their appearance and behaviour are based on Javascript program code. So they can be animated or static, with any color and size with good look at usual and high resolution devices.
Define the size of the icon by simply using the "data-s" option provided in the plugin.
Define the any color for the icons and ofcourse the color change on hover of an icon.
Define the speed of the animation using the "data-d" option and you can have fast or slow animation.
"Data-l" option can make the icon on mouse hover have the animation repeated at infinit.
Animation is triggered when you hover over the parrent element of the icon.
Quisque sagittis lacus eu lorem sodales, id vulputate velit adipiscing. Aenean adipiscing, sem sit amet mollis aliquet.
We're Back Baby!Can be used inside the theme button and the animation is trigered when the user hover the button.
{icon-livicon name="tags" size="16" color="#f7505a" colorhover="#778899" animate="true" loop="false" iteration="3" duration="" onparent="false" class="iconright" } A lot of options at the first look but no worry, you have a comfortable and easy to use editor for it in the Backend!
Using the icons provided in the theme you can build nice styled icon lists. Bellow you can see the styles provided in the theme.
{list class="list-default fa-ul"} {listing}{icon-fa name="fa-thumbs-up fa-li"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default fa-ul"} {listing}{icon-avendor name="camera-2 fa-li"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default fa-ul"} {listing}{icon-livicon name="sun" size="20" color="#778899" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing} ... ... {/list}
{list class="list-default fa-ul"} {listing}{icon-fa name="fa-thumbs-up fa-li" color="color-info"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default fa-ul"} {listing}{icon-avendor name="camera-2 fa-li" color="color-info"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default fa-ul"} {listing}{icon-livicon name="sun" size="20" color="#22d2d2" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing} ... ... {/list}
{list class="list-default divider-list fa-ul"} {listing}{icon-fa name="fa-thumbs-up fa-li"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default divider-list fa-ul"} {listing}{icon-avendor name="camera-2 fa-li" color="color-info"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default divider-list fa-ul"} {listing}{icon-livicon name="sun" size="20" color="#22d2d2" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing} ... ... {/list}
{list class="list-default divider-list biglist fa-ul"} {listing}{icon-fa name="fa-thumbs-up fa-li"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default divider-list biglist fa-ul"} {listing}{icon-avendor name="camera-2 fa-li" color="color-info"}Aenean eget mi eget{/listing} ... ... {/list} {list class="list-default divider-list biglist fa-ul"} {listing}{icon-livicon name="sun" size="20" color="#22d2d2" colorhover="#f7505a" animate="true" loop="false" iteration="3" duration="auto" onparent="true"}Aenean eget mi eget{/listing} ... ... {/list}
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
{iconbox} {icon-round-full bgcolor="color-grey" color="color-text" class="animation bounceIn"} {icon-fa name="fa-desktop"} {/icon} {iconbox-content} {h5 class="bold"}100% Responsive Layout{/h5} {p}Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.{/p} {/iconbox} Please look the Shortcodes for the Icon Boxes
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.
{iconbox class="animation fadeInLeft"} {icon-round-border color="color-text" size="2x" class="pull-right"} {icon-fa name="fa-desktop"} {/icon} {iconbox-content} {h5 class="bold text-right"}100% Responsive Layout{/h5} {p class="text-right"}Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.{/p} {/iconbox} {iconbox class="animation fadeInRight"} {icon-round-full bgcolor="color-default" color="color-white" size="2x"} {icon-fa name="fa-desktop"} {/icon} {iconbox-content} {h5 class="bold"}100% Responsive Layout{/h5} {p}Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas.{/p} {/iconbox} Please look also the Shortcodes for the Icon Boxes