Easy Icon Fonts Features
[envato type=”compact” username=”oscitasthemes” market=”codecanyon” price=”false” ref=”oscitasthemes” currency=”$” count=0 bootstrap=”1″]
[epsshortcode id=179]
Easy Icon Fonts Features List
.Support 7 different icon fonts
[restabs icon=”true” text=”More” class=”bg-custom-tabs”]
[restab title=”Glyphincon” active=”active”]
[/restab][restab title=”Font Awesome”]
[/restab][restab title=”Brandico”]
[/restab][restab title=”Entypo”]
[/restab][restab title=”Maki”]
[/restab][restab title=”Typicons”]
[/restab][restab title=”Zocial”]
[/restab][/restabs]
16 attractive hover effects
Icon Hover Effects 1
[eificon class=” glyphicons glyphicon-user” hovereffect=”osc-effect-1″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “14,131,205” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-cloud-upload” hovereffect=”osc-effect-1″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “14,131,205” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-film” hovereffect=”osc-effect-1″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “14,131,205” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-globe” hovereffect=”osc-effect-1″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “14,131,205” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-cog” hovereffect=”osc-effect-1″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “14,131,205” iconradiussize = “52”]
Icon Hover Effects 2
[eificon class=” glyphicons glyphicon-backward” hovereffect=”osc-effect-2″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “217,105,73” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-play” hovereffect=”osc-effect-2″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “217,105,73” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-stop” hovereffect=”osc-effect-2″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “217,105,73” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-pause” hovereffect=”osc-effect-2″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “217,105,73” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-forward” hovereffect=”osc-effect-2″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “217,105,73” iconradiussize = “52”]
Icon Hover Effects 3
[eificon class=” glyphicons glyphicon-align-left” hovereffect=”osc-effect-3″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “65,171,107” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-align-center” hovereffect=”osc-effect-3″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “65,171,107” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-align-right” hovereffect=”osc-effect-3″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “65,171,107” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-align-justify” hovereffect=”osc-effect-3″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “65,171,107” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-list” hovereffect=”osc-effect-3″ fontsize = “32” iconcolor = “#FFFFFF” bgcolor = “65,171,107” iconradiussize = “52”]
Icon Hover Effects 4
[eificon class=” glyphicons glyphicon-map-marker” hovereffect=”osc-effect-4″ fontsize = “32” iconcolor = “#EFECCA” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-adjust” hovereffect=”osc-effect-4″ fontsize = “32” iconcolor = “#EFECCA” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-leaf” hovereffect=”osc-effect-4″ fontsize = “32” iconcolor = “#EFECCA” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-cog” hovereffect=”osc-effect-4″ fontsize = “32” iconcolor = “#EFECCA” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-glass” hovereffect=”osc-effect-4″ fontsize = “32” iconcolor = “#EFECCA” bgcolor = “4,99,128” iconradiussize = “52”]
Icon Hover Effects 5
[eificon class=” glyphicons glyphicon-plus-sign” hovereffect=”osc-effect-5″ fontsize = “32” iconcolor = “#F7E967” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-minus-sign” hovereffect=”osc-effect-5″ fontsize = “32” iconcolor = “#F7E967” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-remove-sign” hovereffect=”osc-effect-5″ fontsize = “32” iconcolor = “#F7E967” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-ok-sign” hovereffect=”osc-effect-5″ fontsize = “32” iconcolor = “#F7E967” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-question-sign” hovereffect=”osc-effect-5″ fontsize = “32” iconcolor = “#F7E967” bgcolor = “150,169,75” iconradiussize = “52”]
Icon Hover Effects 6
[eificon class=” glyphicons glyphicon-thumbs-up” hovereffect=”osc-effect-6″ fontsize = “32” iconcolor = “#3E454C” bgcolor = “255,127,102” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-thumbs-down” hovereffect=”osc-effect-6″ fontsize = “32” iconcolor = “#3E454C” bgcolor = “255,127,102” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-hand-left” hovereffect=”osc-effect-6″ fontsize = “32” iconcolor = “#3E454C” bgcolor = “255,127,102” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-hand-up” hovereffect=”osc-effect-6″ fontsize = “32” iconcolor = “#3E454C” bgcolor = “255,127,102” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-hand-down” hovereffect=”osc-effect-6″ fontsize = “32” iconcolor = “#3E454C” bgcolor = “255,127,102” iconradiussize = “52”]
Icon Hover Effects 7
[eificon class=” glyphicons glyphicon-circle-arrow-right” hovereffect=”osc-effect-9″ fontsize = “32” iconcolor = “#32CB86” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-circle-arrow-left” hovereffect=”osc-effect-9″ fontsize = “32” iconcolor = “#32CB86” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-circle-arrow-up” hovereffect=”osc-effect-9″ fontsize = “32” iconcolor = “#32CB86” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-circle-arrow-down” hovereffect=”osc-effect-9″ fontsize = “32” iconcolor = “#32CB86” bgcolor = “4,99,128” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-exclamation-sign” hovereffect=”osc-effect-9″ fontsize = “32” iconcolor = “#32CB86” bgcolor = “4,99,128” iconradiussize = “52”]
Icon Hover Effects 8
[eificon class=” glyphicons glyphicon-save” hovereffect=”osc-effect-10″ fontsize = “32” iconcolor = “#77C4D3” bgcolor = “0,47,47” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-open” hovereffect=”osc-effect-10″ fontsize = “32” iconcolor = “#77C4D3” bgcolor = “0,47,47” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-saved” hovereffect=”osc-effect-10″ fontsize = “32” iconcolor = “#77C4D3” bgcolor = “0,47,47” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-import” hovereffect=”osc-effect-10″ fontsize = “32” iconcolor = “#77C4D3” bgcolor = “0,47,47” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-export” hovereffect=”osc-effect-10″ fontsize = “32” iconcolor = “#77C4D3” bgcolor = “0,47,47” iconradiussize = “52”]
Icon Hover Effects 9
[eificon class=” glyphicons glyphicon-sd-video” hovereffect=”osc-effect-11″ fontsize = “32” iconcolor = “#F28705” bgcolor = “185,18,27” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-hd-video” hovereffect=”osc-effect-11″ fontsize = “32” iconcolor = “#F28705” bgcolor = “185,18,27” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-sound-stereo” hovereffect=”osc-effect-11″ fontsize = “32” iconcolor = “#F28705” bgcolor = “185,18,27” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-sound-dolby” hovereffect=”osc-effect-11″ fontsize = “32” iconcolor = “#F28705” bgcolor = “185,18,27” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-subtitles” hovereffect=”osc-effect-11″ fontsize = “32” iconcolor = “#F28705” bgcolor = “185,18,27” iconradiussize = “52”]
Icon Hover Effects 10
[eificon class=” glyphicons glyphicon-music” hovereffect=”osc-effect-12″ fontsize = “32” iconcolor = “#513B00” bgcolor = “238,163,3” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-heart” hovereffect=”osc-effect-12″ fontsize = “32” iconcolor = “#513B00” bgcolor = “238,163,3” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-star” hovereffect=”osc-effect-12″ fontsize = “32” iconcolor = “#513B00” bgcolor = “238,163,3” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-star-empty” hovereffect=”osc-effect-12″ fontsize = “32” iconcolor = “#513B00” bgcolor = “238,163,3” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-asterisk” hovereffect=”osc-effect-12″ fontsize = “32” iconcolor = “#513B00” bgcolor = “238,163,3” iconradiussize = “52”]
Icon Hover Effects 11
[eificon class=” glyphicons glyphicon-repeat” hovereffect=”osc-effect-13″ fontsize = “32” iconcolor = “#27E357” bgcolor = “255,103,45” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-refresh” hovereffect=”osc-effect-13″ fontsize = “32” iconcolor = “#27E357” bgcolor = “255,103,45” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-retweet” hovereffect=”osc-effect-13″ fontsize = “32” iconcolor = “#27E357” bgcolor = “255,103,45” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-play-circle” hovereffect=”osc-effect-13″ fontsize = “32” iconcolor = “#27E357” bgcolor = “255,103,45” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-time” hovereffect=”osc-effect-13″ fontsize = “32” iconcolor = “#27E357” bgcolor = “255,103,45” iconradiussize = “52”]
Icon Hover Effects 12
[eificon class=” glyphicons glyphicon-earphone” hovereffect=”osc-effect-14″ fontsize = “32” iconcolor = “#DD3E1F” bgcolor = “231,62,31” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-phone-alt” hovereffect=”osc-effect-14″ fontsize = “32” iconcolor = “#DD3E1F” bgcolor = “231,62,31” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-phone” hovereffect=”osc-effect-14″ fontsize = “32” iconcolor = “#DD3E1F” bgcolor = “231,62,31” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-hdd” hovereffect=”osc-effect-14″ fontsize = “32” iconcolor = “#DD3E1F” bgcolor = “231,62,31” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-print” hovereffect=”osc-effect-14″ fontsize = “32” iconcolor = “#DD3E1F” bgcolor = “231,62,31” iconradiussize = “52”]
Icon Hover Effects 13
[eificon class=” glyphicons glyphicon-zoom-in” hovereffect=”osc-effect-15″ fontsize = “32” iconcolor = “#563D7C” bgcolor = “86,61,124” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-zoom-out” hovereffect=”osc-effect-15″ fontsize = “32” iconcolor = “#563D7C” bgcolor = “86,61,124” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-search” hovereffect=”osc-effect-15″ fontsize = “32” iconcolor = “#563D7C” bgcolor = “86,61,124” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-signal” hovereffect=”osc-effect-15″ fontsize = “32” iconcolor = “#563D7C” bgcolor = “86,61,124” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-trash” hovereffect=”osc-effect-15″ fontsize = “32” iconcolor = “#563D7C” bgcolor = “86,61,124” iconradiussize = “52”]
Icon Hover Effects 14
[eificon class=” glyphicons glyphicon-facetime-video” hovereffect=”osc-effect-16″ fontsize = “32” iconcolor = “#1669C2” bgcolor = “14,131,205” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-picture” hovereffect=”osc-effect-16″ fontsize = “32” iconcolor = “#1669C2” bgcolor = “14,129,255” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-headphones” hovereffect=”osc-effect-16″ fontsize = “32” iconcolor = “#1669C2” bgcolor = “14,129,255” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-volume-off” hovereffect=”osc-effect-16″ fontsize = “32” iconcolor = “#1669C2” bgcolor = “14,129,255” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-volume-up” hovereffect=”osc-effect-16″ fontsize = “32” iconcolor = “#1669C2” bgcolor = “14,129,255” iconradiussize = “52”]
Icon Hover Effects 15
[eificon class=” glyphicons glyphicon-wrench” hovereffect=”osc-effect-17″ fontsize = “32” iconcolor = “#91BF96” bgcolor = “145,191,150” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-pushpin” hovereffect=”osc-effect-17″ fontsize = “32” iconcolor = “#91BF96” bgcolor = “145,191,150” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-link” hovereffect=”osc-effect-17″ fontsize = “32” iconcolor = “#91BF96” bgcolor = “145,191,150” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-fullscreen” hovereffect=”osc-effect-17″ fontsize = “32” iconcolor = “#91BF96” bgcolor = “145,191,150” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-dashboard” hovereffect=”osc-effect-17″ fontsize = “32” iconcolor = “#91BF96” bgcolor = “145,191,150” iconradiussize = “52”]
Icon Hover Effects 16
[eificon class=” glyphicons glyphicon-download” hovereffect=”osc-effect-18″ fontsize = “32” iconcolor = “#96A94B” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-upload” hovereffect=”osc-effect-18″ fontsize = “32” iconcolor = “#96A94B” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-camera” hovereffect=”osc-effect-18″ fontsize = “32” iconcolor = “#96A94B” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-credit-card” hovereffect=”osc-effect-18″ fontsize = “32” iconcolor = “#96A94B” bgcolor = “150,169,75” iconradiussize = “52”]
[eificon class=” glyphicons glyphicon-shopping-cart” hovereffect=”osc-effect-18″ fontsize = “32” iconcolor = “#96A94B” bgcolor = “150,169,75” iconradiussize = “52”]
Option to customize the icon color and size
[eificon class=” glyphicons glyphicon-th-large” fontsize = “150” iconcolor = “#41AB6B” bgcolor = “255,255,255” iconradiussize = “30”] [eificon class=” glyphicons glyphicon-th-large” fontsize = “120” iconcolor = “#EEA303” bgcolor = “255,255,255” iconradiussize = “30”] [eificon class=” glyphicons glyphicon-th-large” fontsize = “90” iconcolor = “#F06060” bgcolor = “255,255,255” iconradiussize = “30”] [eificon class=” glyphicons glyphicon-th-large” fontsize = “60” iconcolor = “#0E83CD” bgcolor = “255,255,255” iconradiussize = “30”] [eificon class=” glyphicons glyphicon-th-large” fontsize = “40” iconcolor = “#D54F30” bgcolor = “255,255,255” iconradiussize = “30”] [eificon class=” glyphicons glyphicon-th-large” fontsize = “22” iconcolor = “#96A94B” bgcolor = “255,255,255” iconradiussize = “30”] [eificon class=” glyphicons glyphicon-th-large” fontsize = “12” iconcolor = “#0F999F” bgcolor = “255,255,255” iconradiussize = “30”]
Option to bind the handler
We have provided the handler option, where you can give the class name of the container, so that you can bind the icon effect to the container such as div, p, td etc. This is useful when user want to bind the effect on mouse hover of the container instead of the icon. Please check the following examples to make it more clear
Without handler class
[eificon class=”eif-mem-icon glyphicons glyphicon-th-list” hovereffect=”osc-effect-3″ fontsize = “39” iconcolor = “#f7b10f” bgcolor = “55,201,52” iconradiussize = “51”]
With handler class
[eificon class=”eif-mem-icon glyphicons glyphicon-user” hovereffect=”osc-effect-1″ fontsize = “51” iconcolor = “#f00e0e” bgcolor = “17,247,247” iconradiussize = “51” iconhandler=”testing”]
Preview area to see the effects and how it will look at frontend.
