Note: Term icon won't be displayed here automatically on your theme.
It must be retrieved and displayed using iconize_get_term_icon_by() function. Read more...
hover effect
Stacked Icons
Hover effect trigger element
If you want to trigger icons hover effect when user hover over one of the parent elements, you can do it by adding iconized-hover-trigger class to desired parent element.
Examples:
<h4 class="iconized-hover-trigger"><span class="iconized font-awesome glyph-eye hover-animate-fade-out"></span> Lorem ipsum</h4>
Lorem ipsum
<p class="iconized-hover-trigger"><span class="iconized font-awesome glyph-up-hand size-sharp-5x align-left hover-animate-rotate-90" style="color: #3c4b70;"></span>Lorem ipsum dolor sit amet,...</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at placerat tellus. Nam ac nisi ut lorem tempor accumsan lacinia non arcu. Mauris convallis aliquam tortor vitae interdum. Suspendisse vestibulum leo in felis tempor, quis ornare elit ultricies. Nullam eu dui non velit pellentesque ullamcorper. Proin bibendum ipsum a quam ultrices, ullamcorper congue justo egestas. Donec tincidunt sit amet ipsum et feugiat. Fusce sodales pharetra ante, et fringilla nunc eleifend a.
<ul class="iconized-ul">
<li class="iconized-hover-trigger"><span class="iconized font-awesome glyph-up-hand size-sharp hover-animate-grow-rotate-90 iconized-li" style="color: #3c4b70;"></span>List item</li>
<li class="iconized-hover-trigger"><span class="iconized font-awesome glyph-up-hand size-sharp hover-animate-grow-rotate-90 iconized-li" style="color: #3c4b70;"></span>List item</li>
<li class="iconized-hover-trigger"><span class="iconized font-awesome glyph-up-hand size-sharp hover-animate-grow-rotate-90 iconized-li" style="color: #3c4b70;"></span>List item</li>
</ul>
- List item
- List item
- List item
<ul class="iconized-ul iconized-hover-trigger">
<li><span class="iconized font-awesome glyph-up-hand size-sharp hover-animate-grow-rotate-90 iconized-li" style="color: #3c4b70;"></span>List item</li>
<li><span class="iconized font-awesome glyph-up-hand size-sharp hover-animate-grow-rotate-90 iconized-li" style="color: #3c4b70;"></span>List item</li>
<li><span class="iconized font-awesome glyph-up-hand size-sharp hover-animate-grow-rotate-90 iconized-li" style="color: #3c4b70;"></span>List item</li>
</ul>
- List item
- List item
- List item
Parent hover color inheritance
If “parent hover color inheritance” is enabled in dialog, hover-color-change class will be added to icon and, on hover, its color will change to whatever parent color is.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper erat quam, a euismod ipsum varius a. Sed volutpat metus a tortor dapibus imperdiet. Aenean rutrum felis volutpat dui ultricies, sit amet mattis est ultricies. Sed suscipit mi nec tincidunt posuere. Nunc adipiscing commodo venenatis. Phasellus at sem vitae eros faucibus scelerisque ac faucibus mi. Curabitur id suscipit quam, vel pharetra ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper erat quam, a euismod ipsum varius a. Sed volutpat metus a tortor dapibus imperdiet. Aenean rutrum felis volutpat dui ultricies, sit amet mattis est ultricies. Sed suscipit mi nec tincidunt posuere. Nunc adipiscing commodo venenatis. Phasellus at sem vitae eros faucibus scelerisque ac faucibus mi. Curabitur id suscipit quam, vel pharetra ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper erat quam, a euismod ipsum varius a. Sed volutpat metus a tortor dapibus imperdiet. Aenean rutrum felis volutpat dui ultricies, sit amet mattis est ultricies. Sed suscipit mi nec tincidunt posuere. Nunc adipiscing commodo venenatis. Phasellus at sem vitae eros faucibus scelerisque ac faucibus mi. Curabitur id suscipit quam, vel pharetra ante.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a dapibus enim, vitae placerat ligula. Sed iaculis rutrum libero, ac imperdiet odio mattis et. Suspendisse potenti. Fusce mollis eros sit amet tortor posuere, quis lacinia odio hendrerit. Etiam elementum arcu orci, eu molestie quam malesuada non. Praesent id accumsan dui, ut facilisis dui. Pellentesque at erat facilisis, porta purus quis, mattis felis. Fusce bibendum est quam, vel volutpat enim elementum nec. Praesent sit amet ullamcorper ipsum. Ut malesuada dapibus est, a dictum dolor. Quisque porttitor sem eros. Pellentesque et justo nisl. In in metus lacus. Nulla ultrices auctor ligula eget semper. Fusce eleifend neque sit amet augue lobortis pretium. Nunc eleifend odio a ipsum lacinia, et dignissim lacus interdum.
Phasellus mattis sollicitudin elit, sit amet tempus nisi pharetra non. Maecenas porta hendrerit dictum. Nullam ut mauris erat. Maecenas auctor neque dolor, a egestas erat lobortis vel. Cras eleifend tortor lorem, a placerat libero fringilla euismod. Nullam eget ultrices neque. Sed nec dignissim arcu. Nulla ut ante pretium, vehicula nulla vitae, rhoncus lorem. Aenean ac ante nec enim pharetra dignissim vel eu nibh.
Duis quis ipsum tincidunt, tempus ligula a, faucibus mi. Morbi tempor malesuada lorem ut hendrerit. Nulla lacinia elit eu dui luctus, vitae aliquam turpis pretium. Curabitur tristique hendrerit massa in ullamcorper. Nullam in lectus tempus, dictum ante a, congue justo. Sed in quam sed tortor lacinia vehicula non non quam. In quis egestas sapien. Proin vel porttitor sem. Pellentesque interdum purus orci. Curabitur varius neque quam, in laoreet ante ultrices a. Aliquam erat volutpat.