Using Icons in Your Flip Box
Icons are a great way to make your flip box cards instantly recognizable. The Flipbox plugin includes built-in support for Font Awesome icons, giving you access to thousands of free icons without installing anything extra.
What Is Font Awesome?
Font Awesome is the most popular icon library for the web. It includes icons for virtually every category — business, tech, social media, arrows, communication, e-commerce, and much more. Flipbox loads Font Awesome automatically so you can use any of its icons on the front face of your cards.
How to Add an Icon to a Card
- In the Flipbox editor, open an item to edit it.
- Find the Front Icon field.
- Click the icon picker button to browse and search available icons, OR type the Font Awesome class directly.
- Select your icon and save.
Typing Icon Classes Directly
If you know the Font Awesome class for the icon you want, you can type it directly into the field. The format is:
fas fa-star– Solid iconsfar fa-star– Regular (outline) iconsfab fa-wordpress– Brand icons (social media, tech logos)
You can find icon class names at the official Font Awesome website by searching for the icon you want.
Icon Style Settings
Once you’ve added an icon, go to the Front Face settings panel to style it:
Icon Color
Sets the color of the icon itself (the line/fill color).
Icon Background Color
Adds a background shape behind the icon. Use this to create icon “badges” or circles. Supports transparency — set it to transparent if you just want the icon with no background.
Icon Size
Controls the font size of the icon in pixels. Typical sizes range from 24px (small) to 64px (large feature icon).
Icon Width & Height
Controls the size of the background container around the icon. Set equal values (e.g., 80×80) to create a square or circular container.
Icon Border Radius
Rounds the corners of the icon background container.
- 0px = square background
- 8px = slightly rounded square
- 50% or a very high value (e.g., 999px) = perfect circle
Popular Icon Combinations
| Style | Icon Color | Background Color | Border Radius |
|---|---|---|---|
| Flat icon, no background | Brand color | Transparent | 0 |
| Icon in a circle | White | Brand color | 50% |
| Icon in a rounded square | White | Brand color | 12px |
| Outlined circle | Brand color | Transparent | 50% + border |
Icons Not Showing?
If your icons aren’t displaying on the front end, the most common cause is Font Awesome being disabled in the plugin settings. Check this:
- Go to Flipbox → Settings.
- Look for the Load Font Awesome setting.
- Make sure it’s set to Yes.
If you’re using a theme or another plugin that already loads Font Awesome, you can leave it set to “No” — your icons should still load via the theme’s version. However, if icons break after turning it off, turn it back on.
See Font Awesome & Google Fonts Settings for more details.