Want to spice up a boring list on your website? Just use this handy guide to turn list bullets into any icon or emoji!
Watch this video for precise instructions and crucial tips!
Custom CSS to turn a regular list into an “icon” list
If you’re using Focus, try the SCSS code below. Otherwise, use the basic CSS.
First, you need to add some Custom CSS to your website so you can transform any list into something more visually exciting—with icons or emoji for bullets!
SCSS Version
ul.checklist {
list-style-type: none;
margin-left: 0;
li {
padding-left: ($x3 + $x6);
&:before {
content: '\2713';
color: red;
display: inline-block;
width: ($x3 + $x6);
margin-left: -($x3 + $x6);
font-family: inherit;
font-weight: normal;
}
}
}
Basic CSS Version
ul.checklist {
list-style-type: none;
margin-left: 0;
}
ul.checklist li {
padding-left: 23px;
}
ul.checklist li:before {
content: '\2713';
color: red;
display: inline-block;
width: 23px;
margin-left: -23px;
font-family: inherit;
font-weight: normal;
}
Note: If you’re using basic CSS, you may want to play with the 23px values to see what looks best. If you’re using Focus and SCSS, your values will always adjust to work perfectly with your selected font and font size!
Which icon or emoji do you want to use for your bullets?
Choose an icon or emoji that matches the vibe of your offer!
Replace the content property in your CSS with the proper value for your desired icon. I’ve prepared a list of some of the most appropriate checkmarks and bullet-style icons for you to peruse below:
Checkmarks
- ✅
\2705— check mark button - ✓
\2713— check mark - ✔
\2714— heavy check mark - ☑
\2611— checkbox with check
Arrows & Pointers
- 👉
\1f449— right-pointing backhand index - →
\2192— rightwards arrow - ⇒
\21d2— rightwards double arrow - ▶
\25b6— black right-pointing triangle - ▷
\25b7— white right-pointing triangle - ▸
\25b8— black right-pointing small triangle - ▹
\25b9— white right-pointing small triangle - ►
\25ba— black right-pointing pointer - ▻
\25bb— white right-pointing pointer - ☞
\261e— white right-pointing index - ➔
\2794— heavy wide-headed rightwards arrow - ➙
\2799— heavy rightwards arrow - ➛
\279b— drafting point rightwards arrow - ➜
\279c— heavy round-tipped rightwards arrow - ➝
\279d— triangle-headed rightwards arrow - ➞
\279e— heavy triangle-headed rightwards arrow - ➟
\279f— dashed triangle-headed rightwards arrow - ➠
\27a0— heavy dashed triangle-headed rightwards arrow - ➡
\27a1— black rightwards arrow - ➢
\27a2— 3D top-lighted rightwards arrowhead - ➣
\27a3— 3D bottom-lighted rightwards arrowhead - ➤
\27a4— black rightwards arrowhead - ➥
\27a5— heavy black curved downwards and rightwards arrow - ➭
\27ad— heavy lower right-shadowed white rightwards arrow - ➮
\27ae— heavy upper right-shadowed white rightwards arrow - ➯
\27af— notched lower right-shadowed white rightwards arrow - ➱
\27b1— notched upper right-shadowed white rightwards arrow - ➳
\27b3— white-feathered rightwards arrow - ➵
\27b5— black-feathered rightwards arrow - ➸
\27b8— heavy black-feathered rightwards arrow
Want to change the color of your icons?
Simply replace the red color in the CSS provided above with your desired color. You can use any type of color value you want (color names, hexadecimal, RGB, or HSL).
