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" 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_1479148345221{margin-bottom: 0px !important;background-color: #f6f6f6 !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][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/2"][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_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"][/vc_column_inner][vc_column_inner width="1/2"][vc_single_image image="22493" img_size="large" alignment="center" css_animation="fadeInRight"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row" 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_1479148345221{margin-bottom: 0px !important;background-color: #f6f6f6 !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][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][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][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" 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_1479148345221{margin-bottom: 0px !important;background-color: #f6f6f6 !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="fa 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" 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" tooltip_content="This icon has a viewport animation, did you notice?" 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" tooltip_content="This is an actual image, replacing the standard font icon." 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" tooltip_content="This icon has a viewport animation, did you notice?" 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="fa fa-floppy-o" icon_size_slide="75" icon_color="#dd8500" icon_align="center" 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