SIMPLE FONT ICONS

SHOW ANY ACTIVE FONT ICON INDIVIDUALLY

Sometimes, you just want to place an icon or image on your page with some styling, maybe a tooltip and possible wrap a link to another page section, external page or file around it. The “TS Icon Fonts” element will do exactly that. Pick an icon or image, select the icon color and background color, provide the optional link … and you’re done.

You can style any aspect of the icon: size, color, background, border (color, width, type, radius), alignment, animations, tooltip and apply a link to the icon.

Export Page Content

[vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578146806750{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">SIMPLE FONT ICONS</h1>
<h3 style="text-align: center;">SHOW ANY ACTIVE FONT ICON INDIVIDUALLY</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="20" padding_bottom="20" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479739329288{margin-bottom: 0px !important;}"][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_column_text]
<p style="text-align: justify;">Sometimes, you just want to place an icon or image on your page with some styling, maybe a tooltip and possible wrap a link to another page section, external page or file around it. The "TS Icon Fonts" element will do exactly that. Pick an icon or image, select the icon color and background color, provide the optional link ... and you're done.</p>
[/vc_column_text][TS-VCSC-Spacer height="20"][TS_VCSC_Info_Notice panel_layout="notice" panel_type="info" panel_icon="fa fa-info-circle" font_title_family="Default:regular" font_content_family="Default:regular"]
<p style="text-align: justify;">You can style any aspect of the icon: size, color, background, border (color, width, type, radius), alignment, animations, tooltip and apply a link to the icon.</p>
[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height="20"][TS_VCSC_Content_Export toggle_switch="true" toggle_background="#7bacd5" clipboard="true"][TS-VCSC-Spacer height="20"][TS-VCSC-Font-Icons icon="fa fa-arrow-circle-o-down" scroll_navigate="true" icon_size_slide="80" icon_align="center" scroll_target="AnimationsTooltips" scroll_offset="desktop:70px;tablet:0px;mobile:0px;" animation_active="ts-infinite-css-flash" css3animations_active="Flash"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_single_image image="22493" img_size="large" alignment="center" css_animation="fadeInRight"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578146839567{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">BASIC FONT ICON EXAMPLES</h1>
<h3 style="text-align: center;">SHOW ANY ACTIVE FONT ICON INDIVIDUALLY</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479739817323{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-briefcase" icon_size_slide="75" icon_color="#1e73be" icon_align="center"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-coffee" icon_size_slide="75" icon_color="#dd9933" icon_align="center"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-android" icon_size_slide="75" icon_color="#81d742" icon_align="center"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-cogs" icon_size_slide="75" icon_color="#dd3333" icon_align="center"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-calendar-check-o" icon_size_slide="75" icon_color="#000000" icon_align="center"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-camera-retro" icon_size_slide="75" icon_color="#eeee22" icon_align="center"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-briefcase" icon_size_slide="75" icon_color="#1e73be" icon_align="center" icon_frame_type="solid" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-coffee" icon_size_slide="75" icon_color="#dd9933" icon_align="center" icon_frame_type="solid" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-android" icon_size_slide="75" icon_color="#81d742" icon_align="center" icon_frame_type="solid" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-cogs" icon_size_slide="75" icon_color="#dd3333" icon_align="center" icon_frame_type="solid" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-calendar-check-o" icon_size_slide="75" icon_color="#000000" icon_align="center" icon_frame_type="solid" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-camera-retro" icon_size_slide="75" icon_color="#eeee22" icon_align="center" icon_frame_type="solid" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-briefcase" icon_size_slide="75" icon_color="#1e73be" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-coffee" icon_size_slide="75" icon_color="#dd9933" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-android" icon_size_slide="75" icon_color="#81d742" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-cogs" icon_size_slide="75" icon_color="#dd3333" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-calendar-check-o" icon_size_slide="75" icon_color="#000000" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-camera-retro" icon_size_slide="75" icon_color="#eeee22" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-briefcase" icon_size_slide="75" icon_color="#1e73be" icon_background="#e8e8e8" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-small" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-coffee" icon_size_slide="75" icon_color="#dd9933" icon_background="#ededbb" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-small" icon_frame_color="#dddddd" padding="true" icon_padding="15" animations="true"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-android" icon_size_slide="75" icon_color="#81d742" icon_background="#e0ffe1" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-small" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-cogs" icon_size_slide="75" icon_color="#dd3333" icon_background="#b5d2e5" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-small" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-calendar-check-o" icon_size_slide="75" icon_color="#000000" icon_background="#ceb7e2" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-small" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-camera-retro" icon_size_slide="75" icon_color="#eeee22" icon_background="#dd0000" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-small" icon_frame_color="#dddddd" padding="true" icon_padding="15"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578146848928{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">ANIMATIONS & TOOLTIPS</h1>
<h3 style="text-align: center;">SHOW ANY ACTIVE FONT ICON INDIVIDUALLY</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479739877798{margin-bottom: 0px !important;}" el_id="AnimationsTooltips"][vc_column][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fas fa-bullhorn" icon_size_slide="75" icon_color="#dd3333" icon_background="#eeee22" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-large" padding="true" icon_padding="10" tooltip_css="true" tooltip_base64="VGhpcyUyMGlzJTIwanVzdCUyMGElMjB0b29sdGlwJTIx" animation_icon="ts-hover-css-pulse" css3animations_in="Pulse Normal" animations="true"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-bell" icon_size_slide="75" icon_color="#1e73be" icon_align="center" tooltip_css="true" animation_icon="ts-hover-css-shake" css3animations_in="Shake" animations="true"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon_replace="true" icon_image="21972" icon_size_slide="75" icon_background="#f4f4f4" icon_align="center" padding="true" icon_padding="10" tooltip_css="true" animation_icon="ts-hover-css-pulse" css3animations_in="Pulse Normal" animations="true"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-anchor" icon_size_slide="75" icon_align="center" tooltip_css="true" animation_icon="ts-hover-css-bounce" css3animations_in="Bounce" animations="true"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="fa fa-comments-o" icon_size_slide="75" icon_color="#59d600" icon_align="center" icon_frame_type="solid" icon_frame_radius="ts-radius-full" icon_frame_color="#dddddd" padding="true" icon_padding="10" animation_icon="ts-hover-css-hinge" css3animations_in="Hinge" animations="true"][/vc_column_inner][vc_column_inner width="1/6"][TS-VCSC-Font-Icons icon="far fa-save" icon_size_slide="75" icon_color="#dd8500" icon_background="rgba(255,255,255,0.01)" icon_align="center" tooltip_css="true" tooltip_base64="VGhpcyUyMGlzJTIwYW5vdGhlciUyMHRvb2x0aXAlMjE=" animation_icon="ts-hover-css-rollOut" css3animations_in="Roll Out" animations="true"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row]

Copy