Icons
Attributes
Attribute | Description | Values | Default |
---|---|---|---|
icon | Define the icon | See all the available icons here | N/A |
icon_size | Define the icon size | fa-2x, fa-3x, fa-4x, fa-5x | fa-2x |
set_custom_icon_size | Enable the use of a custom icon size | true, false | false |
custom_icon_size | Define the custom icon size | pixels, pt, em, % | N/A |
custom_icon_margin | Define the spacing between icon and text | pixels, pt, em, % | N/A |
image | Set the url of the image if you don’t want to use the Font Awesome Icons library | URL | N/A |
icon_type | Define the icon type | normal, circle, square | normal |
icon_position | Define the icon position | top, left, left_from_title | left_from_title |
icon_margin | Define the icon position margin | pixels, pt, em, % | N/A |
icon_border_color | Define the icon border color. (Only for square and circle type) | HEX or RGB value | N/A |
icon_color | Define the icon color | HEX or RGB value | N/A |
icon_background_color | Define the icon background color. (Only for square and circle type) | HEX or RGB value | N/A |
title | Define the title | Text | N/A |
title_tag | Define the title tag | h2, h3, h4, h5, h6 | h6 |
title_color | Define the title color | HEX or RGB value | N/A |
text | Define the text | Text | N/A |
text_color | Define the text color | HEX or RGB value | N/A |
link | Define the link url if any | URL | N/A |
link_text | Define the link text | Text | Read more |
link_color | Define the link text color | HEX or RGB value | N/A |
target | Define the link target | _self, _blank | _self |
Demo
[row wrap=”false” padding=”0 0 48px 0″][icon_text icon=”fa-git” icon_type=”circle” icon_position=”top” icon_size=”fa-4x” icon_background_color=”#fcf751″ icon_border_color=”#fcf751″ icon_color=”#000″ title=”About us” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.” link=”#” link_text=”Learn more”]
[icon_text icon=”fa-codepen” icon_type=”circle” icon_position=”top” icon_size=”fa-4x” icon_background_color=”#fcf751″ icon_border_color=”#fcf751″ icon_color=”#000″ title=”Services” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.” link=”#” link_text=”Learn more”]
[icon_text icon=”fa-header” icon_type=”circle” icon_position=”top” icon_size=”fa-4x” icon_background_color=”#fcf751″ icon_border_color=”#fcf751″ icon_color=”#000″ title=”Development” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.” link=”#” link_text=”Learn more”]
[code]
[icon_text icon=”fa-git” icon_type=”circle” icon_position=”top” icon_size=”fa-4x” icon_background_color=”#fcf751″ icon_border_color=”#fcf751″ icon_color=”#000″ title=”About us” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.” link=”#” link_text=”Learn more”]
[/code]
[/row]
[row wrap=”false” padding=”0 0 48px 0″]
[icon_text icon=”fa-desktop” icon_type=”circle” icon_position=”left” icon_size=”fa-3x” use_custom_icon_size=”no” title=”Beautiful design” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-heart” icon_type=”circle” icon_position=”left” icon_size=”fa-3x” use_custom_icon_size=”no” title=”100% Responsive” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-fire” icon_type=”circle” icon_position=”left” icon_size=”fa-3x” use_custom_icon_size=”no” title=”Interactive Elements” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-key” icon_type=”circle” icon_position=”left” icon_size=”fa-3x” use_custom_icon_size=”no” title=”Fully Customizible” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[code]
[icon_text icon=”fa-desktop” icon_type=”circle” icon_position=”left” icon_size=”fa-3x” use_custom_icon_size=”no” title=”Beautiful design” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[/code]
[/row]
[row wrap=”false” padding=”0 0 48px 0″]
[icon_text icon=”fa-desktop” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”Beautiful design” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-eye” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”Minimalist” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-heart” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”100% Responsive” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-dashboard” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”Interactive Stuff” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-globe” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”Google Web Fonts” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[icon_text icon=”fa-key” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”Fully Customizible” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[code]
[icon_text icon=”fa-key” icon_type=”normal” icon_position=”left_from_title” icon_size=”fa-2x” use_custom_icon_size=”no” title=”Fully Customizible” text=”Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.”]
[/code]
[/row]