Simple Font Icons

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 or file around it. The “Font Icon” element will do exactly that. Pick an icon or image, select the icon color and background color, enter the link to another page or file … and you’re done.

[TS_VCSC_Info_Notice panel_type=”info” panel_icon=”ts-awesome-info-circle”]

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.

[/TS_VCSC_Info_Notice]

[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Font Icon Samples” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”U2FtcGxlcw==” el_file1=”” el_file2=””]
[TS-VCSC-Font-Icons icon=”ts-awesome-briefcase” icon_size_slide=”75″ icon_color=”#1e73be” icon_align=”center”]
[TS-VCSC-Font-Icons icon=”ts-awesome-coffee” icon_size_slide=”75″ icon_color=”#dd9933″ icon_align=”center”]
[TS-VCSC-Font-Icons icon=”ts-awesome-android” icon_size_slide=”75″ icon_color=”#81d742″ icon_align=”center”]
[TS-VCSC-Font-Icons icon=”ts-awesome-cogs” icon_size_slide=”75″ icon_color=”#dd3333″ icon_align=”center”]
[TS-VCSC-Font-Icons icon=”ts-awesome-calendar” icon_size_slide=”75″ icon_color=”#000000″ icon_align=”center”]
[TS-VCSC-Font-Icons icon=”ts-awesome-camera-retro” icon_size_slide=”75″ icon_color=”#eeee22″ icon_align=”center”]
[TS-VCSC-Font-Icons icon=”ts-awesome-briefcase” icon_size_slide=”75″ icon_color=”#1e73be” icon_align=”center” icon_frame_type=”solid” icon_frame_color=”#dddddd” padding=”true” icon_padding=”15″]
[TS-VCSC-Font-Icons icon=”ts-awesome-coffee” icon_size_slide=”75″ icon_color=”#dd9933″ icon_align=”center” icon_frame_type=”solid” icon_frame_color=”#dddddd” padding=”true” icon_padding=”15″]
[TS-VCSC-Font-Icons icon=”ts-awesome-android” icon_size_slide=”75″ icon_color=”#81d742″ icon_align=”center” icon_frame_type=”solid” icon_frame_color=”#dddddd” padding=”true” icon_padding=”15″]
[TS-VCSC-Font-Icons icon=”ts-awesome-cogs” icon_size_slide=”75″ icon_color=”#dd3333″ icon_align=”center” icon_frame_type=”solid” icon_frame_color=”#dddddd” padding=”true” icon_padding=”15″]
[TS-VCSC-Font-Icons icon=”ts-awesome-calendar” icon_size_slide=”75″ icon_color=”#000000″ icon_align=”center” icon_frame_type=”solid” icon_frame_color=”#dddddd” padding=”true” icon_padding=”15″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-calendar” 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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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”]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-calendar” 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″]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Animations and Tooltips” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QW5pbWF0aW9ucyUyQyUyMFRvb2x0aXBz” el_file1=”” el_file2=””]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″ animations=”true” animation_icon=”ts-hover-css-pulse”]
[TS-VCSC-Font-Icons icon=”ts-awesome-bell-o” icon_size_slide=”75″ icon_color=”#1e73be” icon_align=”center” tooltip_css=”true” tooltip_content=”This icon has a viewport animation, did you notice?” animations=”true” animation_icon=”ts-hover-css-shake”]
[TS-VCSC-Font-Icons icon_replace=”true” icon_image=”16304″ icon_size_slide=”75″ icon_background=”#f4f4f4″ icon_align=”center” icon_frame_type=”solid” icon_frame_thick=”2″ padding=”true” icon_padding=”10″ tooltip_css=”true” tooltip_content=”This is an actual image, replacing the standard font icon.” animations=”true” animation_icon=”ts-hover-css-pulse”]
[TS-VCSC-Font-Icons icon=”ts-awesome-calendar” icon_size_slide=”75″ icon_align=”center” tooltip_css=”true” tooltip_content=”This icon has a viewport animation, did you notice?” animations=”true” animation_icon=”ts-hover-css-bounce”]
[TS-VCSC-Font-Icons icon=”ts-awesome-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″ animations=”true” animation_icon=”ts-hover-css-hinge”]
[TS-VCSC-Font-Icons icon=”ts-awesome-floppy-o” icon_size_slide=”75″ icon_color=”#dd8500″ icon_align=”center” animations=”true” animation_icon=”ts-hover-css-rollOut”]