This tutorial for beginners, provides the HTML, CSS & PHP code which enables you to style your unordered lists like this:
The checkmarks are loaded using Ion Icons
Step 1.
Using FTP and a code editor, add the following PHP code to your child themes functions.php file.
add_action( 'wp_enqueue_scripts', 'load_ion_icons' );
function load_ion_icons() {
wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}Step 2.
Add the following HTML to a post, page or text widget.
Step 3.
Add the following CSS to your style.css file.
li {
list-style-type: none!important;
}
ul {
margin-bottom: 20px;
margin-left: 10px;
}
ul li {
color: #232525;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
ul.checkmark {
margin-top: 20px;
}
ul.checkmark li:before {
font-size: 48px;
font-size: 4.8rem;
vertical-align: middle;
}
ul.checkmark li:before {
color: #e85555;
content: "\f3fd";
display: inline-block;
font-family: 'ionicons';
margin-left: -36px;
width: 36px;
}
ul.checkmark li {
line-height: 1;
padding: 8px 0 8px 36px;
}The code comes from the Digital Pro child theme by StudioPress
Could this also be a way to customize standard ul? I want to have different symbol for 1st and 2nd level ul’s. i.e. solid circle for 1st level, hollow circle for 2nd level. Also increase top margin on 1st level ul
Regards
Phil
Sorry, don’t understand what you mean. 1st and 2nd level ui’s?
Sorry, I talking about UL’s not ui’s. When using bullets (ul), you can indent and create another level. In MS Word and other programs these other levels automatically change to different symbol. I want to use different symbols for different levels and also increase the gap before
e.g.
– unordered list 1st level, list item
* unordered list 2nd level list item
* list item
* list item
– unordered list 1st level, list item
* list item
So expanding on your code to add different symbol for different level and spacing between
Not something i have worked out how to do or published.