All Collections
CSS hacks
How to use Tickboxes / Checkmarks instead of bulletins via FontAwesome
How to use Tickboxes / Checkmarks instead of bulletins via FontAwesome

CSS Hack

Aleks avatar
Written by Aleks
Updated over a week ago
  1. Make your list using Rich Text widget, go to Page Settings and click on "Additional CSS" button:

2. Then, please copy and paste the code below in the opened CSS window:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
font-family: 'FontAwesome';
ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f14a"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

  • Click on "Save".

Now you'll have Tickboxes instead of Bullet points.

If you want to have other characters:

  • select the character you want to have and copy its Unicode (e.g. f042)

  • Change the existing unicode with yours (line 13): 

  • click on "Save" and you'll see the desired characters:

You can also have the desired characters for the whole project

  • Go to project settings

  • Open "Styles" tab and paste the code, click on "Save"

That's it! Now all the pages in your project will have these characters.

Did this answer your question?