Attributes
Parameters | 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
About us
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Learn moreServices
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Learn moreDevelopment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Learn more[icon_text icon="fa-codepen" icon_type="circle" icon_position="top" icon_size="fa-4x" icon_background_color="#44b687" icon_border_color="#44b687" icon_color="#fff" 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"]
Beautiful design
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Minimalist
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
100% Responsive
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Interactive Stuff
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Google Web Fonts
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
Fully Customizible
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."]