0
Users
0
Projects
0
Awards
FontAwesome Counter Shortcode Plugin – User Guide
🔧 What It Does
This plugin lets you add animated counters to your WordPress pages or posts using a simple shortcode. Each counter can display:
- A FontAwesome icon
- An animated number
- A custom label
- Custom colors and layout
- Scroll-triggered animation with easing
🧩 How to Use the Shortcode
Use the
[fa_counter]shortcode anywhere in your content. Here’s the basic format:
[fa_counter icon="fa-users" value="1500" label="Users"]🎨 Available Attributes
| Attribute | Description | Example Value |
|---|---|---|
icon | FontAwesome icon class (without the `fas` prefix) | fa-rocket |
value | Final number to count up to | 2500 |
label | Text label shown below the number | Projects |
duration | Animation duration in milliseconds | 3000 |
icon_color | Color of the icon | #e91e63 |
text_color | Color of the number | #222222 |
label_color | Color of the label text | #555555 |
background | Background color of the counter box | #f9f9f9 |
width | Width of the counter box (use `%`, `px`, or `em`) | 180px |
🧪 Example: Multiple Counters in a Responsive Row
Wrap multiple counters in a container like this:
<div class="fa-counter-row">[fa_counter icon="fa-users" value="1500" label="Users" icon_color="#007BFF" duration="6000"] [fa_counter icon="fa-briefcase" value="320" label="Projects" icon_color="#28a745" duration="4000"] [fa_counter icon="fa-award" value="85" label="Awards" icon_color="#ffc107"]</div>This will display them side-by-side and wrap on smaller screens.
0
Users
0
Projects
0
Awards
🧠 Tips
- Use [FontAwesome Icons] (https://fontawesome.com/icons) to find the right icon class.
- Combine with headings or sections for a dashboard-style layout.
- Use different durations for staggered animations.