How To Add Multiple FontAwesome Icons with CSS
Ever wanted to show how many RAVE reviews you’ve had in a more visual way? Or show a sequence of different icons in a row?
I’m here to tell you it’s super easy with a little bit of CSS code and FontAwesome!*
*Or any symbol with a unicode. But I much prefer using Fontawesome!
With Css as a psuedo element
Step 01.
Make sure you have connected your FontAwesome account to your website using the Advanced Code Injection method
Step 02.
Use the inspector tool to find the part where you’d like to add your icons. If using the CSS code below, you can swap out the :after with :before if you want change the position of the icons
Step 03.
Simply copy and page the unicodes (string of 4 unique numbers) into the CSS code provided below, paying attention to the formatting and making sure you’ve added the \ between each unicode
Step 04.
You can continue to customise the weight, colours, size and layout within the CSS. More information and help here.
.YOURIDHERE:after {
content: '\e28b\e28b\e28b\e28b\f089';
z-index: 999;
font-family: 'Font Awesome 6 Pro' !important;
font-weight: 600 !important;
}
With a code block
Step 01.
Make sure you have connected your FontAwesome account to your website using the Advanced Code Injection method
Step 02.
Copy the code below and add to a ‘Code Block’ on a page or blog post
Step 03.
This time, we want to code the HTML code snippet from FontAwesome and paste the i class one after the other, to create a row of icons.
Step 04.
You can continue to customise the span style weight, colours, size and layout within the code block, or call on .fa-light or .fa-solid etc in the CSS to make more universal changes.
Ps. want it centered? Wrap everything in <center> </center>
<span style="font-size: 2em; color: black;">
<i class="fa-solid fa-star-sharp"></i><i class="fa-solid fa-star-sharp"></i><i class="fa-solid fa-star-sharp"></i><i class="fa-solid fa-star-sharp"></i><i class="fa-light fa-star-sharp"></i>
</span>
Pin me on pinterest
