Icon Counter

If you want to display some animated statistics or achievements, the “Icon Counter” element is just what you need. Select a font icon or image, adjust its size and colors (font icon), enter your start and end numbers along with a note about what you are counting, and you are set. Of course, you can assign some fancy animations to your icon too.

[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Counter with Images” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”SW1hZ2Vz” el_file1=”” el_file2=””]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16353″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”300″ counter_value_size=”50″ counter_seperator=”true” counter_note=”Beats per Minute” counter_note_size=”25″ height=”10″ counter_value=”256″ icon_align=”none” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16190″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”25″ counter_value_size=”50″ counter_seperator=”true” counter_note=”Days to go …” counter_note_size=”25″ height=”10″ counter_value=”256″ icon_align=”none” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16221″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”800″ counter_value_size=”50″ counter_seperator=”true” counter_note=”Packages Delivered” counter_note_size=”25″ height=”10″ counter_value=”256″ icon_align=”none” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”right” icon_replace=”true” icon_image=”16319″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”185″ counter_value_size=”50″ counter_seperator=”true” counter_note=”Miles per Hour” counter_note_size=”25″ height=”10″ counter_value=”185″ icon_align=”none” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”right” icon_replace=”true” icon_image=”16330″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”1000000″ counter_value_size=”50″ counter_value_format=”true” counter_value_plus=”true” counter_value_seperator=”,” counter_seperator=”true” counter_note=”Frequent Flyer Miles” counter_note_size=”25″ height=”10″ counter_value=”185″ icon_align=”none” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”right” icon_replace=”true” icon_image=”16186″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”178″ counter_value_size=”50″ counter_seperator=”true” counter_note=”Bright Ideas” counter_note_size=”25″ height=”10″ counter_value=”185″ icon_align=”none” tooltip_css=”false”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Counter with Font Icons” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”Rm9udCUyQyUyMEljb25z” el_file1=”” el_file2=””]
[TS-VCSC-Icon-Counter icon=”ts-awesome-medkit” icon_color=”#dd0000″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”468″ counter_note=”Days without Accident” el_file1=”” el_file2=”” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-archive” icon_color=”#a8a8a8″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”2483″ counter_value_format=”true” counter_value_seperator=”,” counter_note=”Files in Archive” el_file1=”” el_file2=”” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-code” icon_color=”#2e7f27″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”10453″ counter_value_format=”true” counter_value_seperator=”,” counter_note=”Lines of Code” el_file1=”” el_file2=”” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-comments-o” icon_color=”#1855a5″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”2300″ counter_value_format=”true” counter_value_plus=”true” counter_value_seperator=”,” counter_note=”Conversations” el_file1=”” el_file2=”” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-gamepad” icon_color=”#fcd123″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”100″ counter_value_format=”true” counter_value_plus=”true” counter_note=”Hours of Playtime” el_file1=”” el_file2=”” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-bug” icon_color=”#6c179e” icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”129″ counter_note=”Bugs Fixed” el_file1=”” el_file2=”” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-keyboard-o” icon_size_slide=”100″ icon_color=”#dd8500″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”158″ counter_value_size=”50″ counter_value_color=”#a03924″ counter_seperator=”true” counter_note=”Characters per Minute” counter_note_size=”25″ counter_note_color=”#dd8500″ tooltip_content=”Doing all that programming, makes us type very fast!” animation_icon=”tada” css3animations_in=”Tada” el_file1=”” el_file2=”” height=”10″ counter_value=”158″ icon_align=”none” tooltip_css=”true”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-coffee” icon_size_slide=”100″ icon_color=”#dd9933″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”120″ counter_value_size=”50″ counter_seperator=”true” counter_note=”Cups of Coffee” counter_note_size=”25″ tooltip_content=”This is the number of coffees consumed while writing this plugin.” animation_icon=”rollOut” css3animations_in=”Roll Out” el_file1=”” el_file2=”” height=”10″ counter_value=”158″ icon_align=”none” tooltip_css=”true”]
[TS-VCSC-Icon-Counter icon=”ts-awesome-users” icon_size_slide=”100″ icon_color=”#dd9933″ icon_background=”#f7f7f7″ counter_value_start=”0″ counter_value_end=”1000″ counter_value_size=”50″ counter_value_format=”true” counter_value_plus=”true” counter_value_seperator=”,” counter_seperator=”true” counter_note=”Satisfied Customers” counter_note_size=”25″ tooltip_content=”This is the number of happy customers we hope to have soon.” animation_icon=”bounceIn” css3animations_in=”Bounce In” el_file1=”” el_file2=”” height=”10″ counter_value=”158″ icon_align=”none” tooltip_css=”true”]
[TS-VCSC-Spacer height=”40″ el_file=””]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Counter with before / after Characters” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”Q2hhcmFjdGVycw==” el_file1=”” el_file2=””]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16269″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”500000″ counter_value_format=”true” counter_value_seperator=”,” counter_value_before=”$” counter_seperator=”true” counter_note=”Funds Raised” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16239″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”28″ counter_value_format=”true” counter_value_before=”+” counter_value_after=”%” counter_seperator=”true” counter_note=”Increase Fuel Economy” tooltip_css=”false”]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16232″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_end=”1100″ counter_value_format=”true” counter_value_seperator=”,” counter_value_after=” ºF” counter_seperator=”true” counter_note=”Fire Resistancy” tooltip_css=”false”]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Counter with Dynamic Values” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RHluYW1pYw==” el_file1=”” el_file2=””][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

Version 2.6.0 of Visual Composer introduced the option to define the animated values for the icon counter by using an external shortcode, provided of course, that the utilized shortcode creates a valid integer (numeric) value.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16196″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_by_shortcode=”true” counter_value_end_shortcode=”JTVCVFNfVkNTQ19HZXROdW1iZXJDb21tZW50cyUyMHNpdGV3aWRlJTNEJTIydHJ1ZSUyMiU1RA==” counter_value_format=”true” counter_value_seperator=”,” counter_seperator=”true” counter_note=”Number of Comments” tooltip_css=”false”]

This icon counter uses a custom shortcode to retrieve the number of comments for either all posts or one specific post, identified within the shortcode via post ID.

[TS_EnlighterJS_Snippet_Single code_type=”php” code_content=”ZnVuY3Rpb24lMjBUU19WQ1NDX0dldE51bWJlckNvbW1lbnRzJTI4JTI0YXR0cyUyOSU3QiUwQSUyMCUyMCUyMCUyMG9iX3N0YXJ0JTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwZXh0cmFjdCUyOHNob3J0Y29kZV9hdHRzJTI4YXJyYXklMjglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJpZCUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUzRSUyMCUyMiUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMnNpdGV3aWRlJTIyJTIwJTIwJTIwJTIwJTIwJTIwJTNEJTNFJTIwJTIyZmFsc2UlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjklMkMlMjAlMjRhdHRzJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwaWYlMjAlMjglMjRzaXRld2lkZSUyMCUzRCUzRCUyMCUyMnRydWUlMjIlMjklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjRjb21tZW50cyUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMHdwX2NvdW50X2NvbW1lbnRzJTI4JTI0aWQlMjklM0IlMEElMjAlMjAlMjAlMjAlN0QlMjBlbHNlJTIwJTdCJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTI0Y29tbWVudHMlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlMjB3cF9jb3VudF9jb21tZW50cyUyOCUyOSUzQiUwQSUyMCUyMCUyMCUyMCU3RCUwQSUyMCUyMCUyMCUyMGVjaG8lMjAlMjRjb21tZW50cy0lM0V0b3RhbF9jb21tZW50cyUzQiUwQSUyMCUyMCUyMCUyMCUyNG15dmFyaWFibGUlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlMjBvYl9nZXRfY2xlYW4lMjglMjklM0IlMEElMjAlMjAlMjAlMjByZXR1cm4lMjAlMjRteXZhcmlhYmxlJTNCJTBBJTdEJTBBYWRkX3Nob3J0Y29kZSUyOCUyMlRTX1ZDU0NfR2V0TnVtYmVyQ29tbWVudHMlMjIlMkMlMjAlMjJUU19WQ1NDX0dldE51bWJlckNvbW1lbnRzJTIyJTI5JTNC”]
[TS-VCSC-Icon-Counter icon_position=”left” icon_replace=”true” icon_image=”16272″ icon_size_slide=”100″ counter_value_start=”0″ counter_value_by_shortcode=”true” counter_value_end_shortcode=”JTVCVFNfVkNTQ19HZXROdW1iZXJQb3N0cyUyMHR5cGUlM0QlMjJwYWdlJTIyJTIwc3RhdHVzJTNEJTIycHVibGlzaCUyMiU1RA==” counter_value_format=”true” counter_value_seperator=”,” counter_seperator=”true” counter_note=”Number of Pages” tooltip_css=”false”]

This icon counter uses a custom shortcode to retrieve the number of posts or pages on the site, using their status (“publish”, “draft”, etc.).

[TS_EnlighterJS_Snippet_Single code_type=”php” code_content=”ZnVuY3Rpb24lMjBUU19WQ1NDX0dldE51bWJlclBvc3RzJTI4JTI0YXR0cyUyOSU3QiUwQSUyMCUyMCUyMCUyMG9iX3N0YXJ0JTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwZXh0cmFjdCUyOHNob3J0Y29kZV9hdHRzJTI4YXJyYXklMjglMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJ0eXBlJTIyJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNEJTNFJTIwJTIycG9zdCUyMiUyQyUwQSUwOSUyMCUyMCUyMCUyMCUyMnN0YXR1cyUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUzRSUyMCUyMnB1Ymxpc2glMjIlMkMlMEElMjAlMjAlMjAlMjAlMjklMkMlMjAlMjRhdHRzJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTI0Y291bnRfcG9zdHMlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlMjB3cF9jb3VudF9wb3N0cyUyOCUyNHR5cGUlMjklM0IlMEElMjAlMjAlMjAlMjBlY2hvJTIwJTI0Y291bnRfcG9zdHMtJTNFJTI0c3RhdHVzJTNCJTBBJTIwJTIwJTIwJTIwJTI0bXl2YXJpYWJsZSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMG9iX2dldF9jbGVhbiUyOCUyOSUzQiUwQSUyMCUyMCUyMCUyMHJldHVybiUyMCUyNG15dmFyaWFibGUlM0IlMEElN0QlMEFhZGRfc2hvcnRjb2RlJTI4JTIyVFNfVkNTQ19HZXROdW1iZXJQb3N0cyUyMiUyQyUyMCUyMlRTX1ZDU0NfR2V0TnVtYmVyUG9zdHMlMjIlMjklM0I=”]