How to Create Bulleted List Items in Weebly?

Bulleted list items are the easiest way to tell the summary of your story point by point. Though there are three types of lists can be created – ordered (or numbered), unordered and definition lists – ordered and unordered lists are most generally used by webmasters. Weebly offers these two types of lists by default without much variation in the bullets. In this article we explore all the possible ways of creating bulleted list in Weebly site.

Basics of Lists

Lists are created with HTML tags where <ul> indicates it is an unordered list and <ol> indicates it is an ordered list. The list items for both cases are enclosed within <li>…</li> tags. The bullet style is generally decided by the browser’s default style which is disc for unordered and decimal for ordered lists. Read HTML lists tutorial to learn more about creating lists.

Following are the possible ways to create lists in Weebly site:

1. Using default list options available for text element. This is same as using HTML lists
2. Using font awesome icons for bullets
3. CSS lists with image bullet
4. CSS lists with different bullet types like circle, disc, roman letters, small letters, capital letters, etc.

Using Default Weebly Lists

When you click on the content inside a text element there will be a popup with many typography options as below:

Weebly by default offers ordered and unordered lists which is similar to the lists created with HTML <ul> and <ol> tags. The unordered lists uses disc as list style and the ordered lists uses decimal style for the bullets. There are no further option in Weebly to change these default values unless you change it in the main stylesheet.

Changing the Default List Style in CSS

If you want to change the default list style then add the following code in your “main.less” (old themes will have “main_style.css”) file. We used circle and lower-alpha for unordered and ordered lists respectively.

div.paragraph ul, div.paragraph ul li {
list-style: circle outside !important; 
}

div.paragraph ol, div.paragraph ol li { 
list-style: lower-alpha outside !important; 
}

Using Font Awesome Icons For Lists Bullets

Though changing the main stylesheet is easy, it restricts the usage to a particular bullet type. The simple and recommended alternative is to use font awesome icons (or any other icons) as a bullet in the lists. This gives opportunity to add unlimited types of icons to your lists. Moreover you can use different bullet icons for the same unordered or ordered list items.

In order to use font awesome icons as list add the below code under the “Header Code” section of your Weebly page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<style>
.fa-ul {
line-height: 28px;
font-size: 22px;
}
</style>

The line height and font size attributes are used to ensure the icons and the text are aligned properly. Below is the HTML content to be added inside an “Embed Code” element.

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Check Square</li>
<li><i class="fa-li fa fa-book"></i>Book</li>
<li><i class="fa-li fa fa-bullhorn"></i>Announcement</li>
<li><i class="fa-li fa fa-gear"></i>Settings</li>
<li><i class="fa-li fa fa-home"></i>Home</li>
<li><i class="fa-li fa fa-phone-square"></i>Phone</li>
</ul>

Here is the font awesome icons list for your reference, choose the one you want to use and replace the highlighted icon class with your own. For example replace “fa-book” with “fa-home” to replace book icon with home icon.

<li><i class="fa-li fa fa-book"></i>Book</li>

Also replace the text with your own.

CSS Lists with Image Bullets

You can use CSS to define an image as a bullet for list items.

First choose the image to be used as a bullet and upload it on your Weebly site. Then add the below code under “Header Code” section of your page:

<style>
.bul {
list-style-image: url("/files/theme/Hand.png");
font-size: 24px;
line-height: 32px;
margin-left: 36px;
}
</style>

Here “Hand.png” is the image used for bullet and remaining styles are to ensure the content is aligned with the bullet image. Add the below HTML code and publish the site to see the bullets in action.

<ul class="bul">
<li>JavaScript</li>
<li>CSS</li>
<li>PHP</li>
</ul>

CSS Lists with Different Bullet Types

You can also use CSS to create different types of bullets for unordered and ordered lists.

Add the below CSS code under “Header Code” section of your Weebly page.

<style>
.css-list1 {
list-style-type: circle;
}
.css-list2 {
list-style-type: disc;
}
.css-list3 {
list-style-type: upper-roman;
}
.css-list4 {
list-style-type: lower-alpha;
}
.common {
margin-left: 36px;
font-size: 24px;
line-height: 32px;
}
</style>

In this example, we create four different bullet styles – two for unordered and two for ordered lists with a “common” class attributes for margin, font size and line height to ensure the content alignment. Add the below HTML code using “Embed Code” element to create lists with different bullet styles.

<!-- Unordered List with circle -->
<ul class="css-list1 common">
<li>WordPress Development</li>
<li>Weebly Development</li>
<li>Joomla Development</li>
</ul>

<!-- Unordered List with disc -->
<ul class="css-list2 common">
<li>Blog - Latest Updates</li>
<li>Forum - Post Your Opinion</li>
<li>Email - Contact Us</li>
</ul>

<!-- Ordered List with upper-roman -->
<ol class="css-list3 common">
<li>Free Email Support</li>
<li>Free Domain Registration</li>
<li>Free Hosting</li>
</ol>

<!-- Ordered List with lower-alpha -->
<ol class="css-list4 common">
<li>Google</li>
<li>Apple</li>
<li>Microsoft</li>
</ol>

Note: CSS “list-style-type” property can be used to define the bullet style for both ordered and unordered lists.

Values for List Style Type

Below is a list of values you can provide for list-style-type in CSS.

armenian	hiragana	lower-latin
circle	hiragana-iroha	lower-roman
cjk-ideographic	inherit	none
decimal	initial	square
decimal-leading-zero	katakana	upper-alpha
disc	katakana-iroha	upper-latin
georgian	lower-alpha	upper-roman
hebrew	lower-greek