So, you used all available CSS properties to style your HTML list, but still not satisfied? CSS is used to manipulate how the content structure (HTML) is rendered so it make more visual sense to the consumer.This is why you can use the CSS list-style property along with adjusting margins and pseudo elements to create some amazing bulleted lists to engage your readers.You can chose one of the default bullet styles by changing the list-style-type property.These are just a few, really the most popular, of the available named options.As you can see from the screenshot there are many other named options. If you are developing a pure HTML website or you struggle to use as less plugins as possible, you can Replacing unsorted list bullet points with Font Awesome icons using CSS is pretty simmilar to the proces of replacing bullets with Unicode symbols.

In the example I moved it to the left 20 pixels and added a 10 pixel right margin. Therefore, we have to use a workaround that includes a couple of CSS properties. If you want to create an unordered list with image bullets, use the CSS property list-style-image. This means you can apply their codes to display them as bullets.For example, the thumbs up emoticon code (a code point or ASCII code) is '\1F44D'. A final touch to style your unordered list could be to change bullet points color, or even change the bullet point shape. Many change the bullet to a native specific symbol.For example by changing the list-style-type to devanagari the bulleted changes to something 'native' to India and Nepal.There are many cultural specific choices you can make. You can easily change the default bullets shape by setting the list’s Examples of unordered list bullet points replaced with Unicode symbols, Fontawesome icons and custom imagesIn order to change bullet point color, in the example above we replaced the default list bullet with an Unicode bullet character. Progressive Web Apps From Beginner to Expert $12.99! Set an image as the list item marker 4. If your intention is to have one list or one list item, not to have bullets or numbers, you had better apply a class that might be used every time you need to remove bullets.. This helps make them stand out from regular content.But the built in options are rather bland.And you may not want to use any bullet or icon to visually indicate list items, yet want to retain the semantic structure to your content.The default bullets can be replaced with other native options or completely removed using CSS to manipulate the Remember everything you see on a web page is a combination of markup and CSS. Therefore, CSS styles are applicable to them and that makes ‘em great for all kinds of use in web development. In order to use them for changing bullet points shape you first have to enable Font Awesome. We’ll Here is an example of CSS code to change the bullet point color, tweak it as you like:CSS offers a couple of shapes to style your unordered HTML list bullet points by default. Then generate our own bullet: li::before {content: "•"; color: red} That inserts a red bullet, but not in the same place as the original bullet. ul.icon { list-style-type: none; } ul.icon li { text-indent: -1.4em; } To add the icon, we use one from our icon set in the content property of the li:before pseudo-element. Here, we will have a class named "nolist" for ordered lists, which can be used anytime when needed in the future. Font Awesome icons are not enabled by default in WordPress. In HTML, there are two main types of lists: 1. unordered lists (

) - the list items are marked with bullets 2. ordered lists (
) - the list items are marked with numbers or lettersThe CSS list properties allow you to: 1. First we removed the default bullets by settings the Here are a couple of suggestions for Unicode symbols codes you can use for changing your list bullets shape:Discover more symbols you can use for replacing bullet points of your unordered list in the full Font Awesome is a great set of free (and additional paid) icons that behave like fonts.

Using Font Awsome icons to replace bulet points in an unordered HTML list is a good web design practice. And you may not want to use any bullet or icon to visually indicate list items, yet want to retain the semantic structure to your content. Set different list item markers for unordered lists 3. A slight modification to the example shown above is needed. You can get the code of your desired or favorite emoticon at However, it does not seem like setting the list-style-type consistently supports using emoticon codes.But don't fear you can still use an emoticon as your bullet!The ::before pseudo element can be used to customize the bullet with an emoticon.You will need to set the default list-style-type to 'none'.You will also need to position the emoticon.

You may have noticed we sometimes use checklists here on the blog and in our child themes for sale.I decided to show you how easy it is to change bullet lists into check marks in Divi with just a few snippets of CSS code that you can use globally on your Divi website.