Icon Lists Using Repeaters
This page provides multiple ways to implement vertical icon lists through HTML and ACF repeaters, either with dynamic or static icons. You can still use Info List module for this if you really want to, though.
Most of the examples use images as bullets, but you can also use Font Awesome icons by creating an ACF field for the icon class and replacing the img tag with an i tag i.e. i class="[wpbb_post:acf type='text name="fa_icon_class"]". You can search for Font Awesome 5 icon classes and unicode values here.
Font Awesome's Built-in List Option
If you don't want to make your life hard, you can use Font Awesome's built-in functionality to use icons as lists. This is also responsive right off the bat. Just change the icon's class name.
- (1) I am a line of text!
- (2) I am a line of text!
- (3) I am a line of text!
- (4) I am a line of text!
- (5) I am a line of text, but I have more lines!
- (6) I am also a line of text, but I have even MORE lines!
- (7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
Basic Vertical List (Flex)
This variation uses flex without ul and is rather basic. Not very friendly with long text and multiple lines, but it's here in case you find a use for it.
(1) I am a line of text!
(2) I am a line of text!
(3) I am a line of text!
(4) I am a line of text!
(5) I am a line of text, but I have more lines!
(6) I am also a line of text, but I have even MORE lines!
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
Using Flex
This variation also uses flex without the need for ul, but is responsive and works fine with long text and multiple lines. Items are arranged in a row, so if items need to follow strict ordering, then you can try using the ul method below instead.
(1) I am a line of text!
(2) I am a line of text!
(3) I am a line of text!
(4) I am a line of text!
(5) I am a line of text, but I have more lines!
(6) I am also a line of text, but I have even MORE lines!
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
Using Grid
This is an alternative method that uses grid to create multiple columns.
The first example is made responsive by using the repeat() function, so there's no need to use media queries anymore (unless you really want to). You can read more about the repeat() function and grid-template-column property here.
The second example uses the fr unit, but isn't responsive off the bat. To change the number of columns, just replace x with the number of columns you want in grid-template-columns: repeat(x, 1fr). Here's useful guide on thefr unit and repeat() function for grids.
(1) I am a line of text!
(2) I am a line of text!
(3) I am a line of text!
(4) I am a line of text!
(5) I am a line of text, but I have more lines!
(6) I am also a line of text, but I have even MORE lines!
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
(1) I am a line of text!
(2) I am a line of text!
(3) I am a line of text!
(4) I am a line of text!
(5) I am a line of text, but I have more lines!
(6) I am also a line of text, but I have even MORE lines!
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
Using Unordered Lists
This variation uses ul with column-count for multiple columns. Items are ordered in column format, so if you need items to flow in a specific way, then this method is for you. This is easier compared to using flex-direction: column since that requires a container height, plus it has occasional issues with Safari.
-
(1) I am a line of text!
-
(2) I am a line of text!
-
(3) I am a line of text!
-
(4) I am a line of text!
-
(5) I am a line of text, but I have more lines!
-
(6) I am also a line of text, but I have even MORE lines!
-
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
Using Unordered Lists (Icons as Pseudoelements)
This variation also uses ul with column-count for multiple columns. However, the icons are static so this is best used for lists with only one icon (images or Font Awesome) since the icons are pseudoelements. If you need to use specific icons per item, then the previous examples are for you.
Q: What if the Font Awesome icons are showing up as boxes?
Use font-family: "Font Awesome 5 Pro". The font-weight depends if you want solid icons or some other style.
-
(1) I am a line of text!
-
(2) I am a line of text!
-
(3) I am a line of text!
-
(4) I am a line of text!
-
(5) I am a line of text, but I have more lines!
-
(6) I am also a line of text, but I have even MORE lines!
-
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?
Using Font Awesome Icons as Bullets
This is an example of using Font Awesome icons as bullets instead of images through ACF. Just create a new field for the icon class ex. fas fa-globe and use an ACF shortcode to assign the class to the i tag.
-
(1) I am a line of text!
-
(2) I am a line of text!
-
(3) I am a line of text!
-
(4) I am a line of text!
-
(5) I am a line of text, but I have more lines!
-
(6) I am also a line of text, but I have even MORE lines!
-
(7) I am a line of text and I'm supposed to have the most number of lines! Or not. Who knows?