Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningIcons and lists
We've used icons in previous lessons, but this time we'll take a closer look at them.
As you remember, you have hundreds of icons at your disposal (1541 icons to be precise). You can find them all in our icon search.
Icons syntax
This is what a typical icon looks like:
And this is its code:
<i class="fas fa-gem"></i>
The syntax here is simple:
fa-gem class determines what icon we want to display. You can see all available icons and their corresponding classes in the icon search.
fas class means 2 things: fa = "font awesome" (this is the name of this icon set) and s stands for "solid".
You can change s to r, which means "regular" and this way you can have an outline version of the gem icon:
And this is its code:
<i class="far fa-gem"></i>
Size
Note that all icons are vectorized. This means that they can be enlarged indefinitely and never lose quality.
To increase icon sizes relative to their container, use fa-xs,
fa-sm, fa-lg (33% increase), or use literal sizes (to scale it from 1x to 10x) fa-2x, fa-3x,
fa-4x, fa-5x, fa-6x, fa-7x,
fa-8x, fa-9x, fa-10x.
<i class="fas fa-gem fa-xs"></i>
<i class="fas fa-gem fa-sm"></i>
<i class="fas fa-gem fa-lg"></i>
<i class="fas fa-gem fa-2x"></i>
<i class="fas fa-gem fa-3x"></i>
<i class="fas fa-gem fa-4x"></i>
<i class="fas fa-gem fa-5x"></i>
<i class="fas fa-gem fa-6x"></i>
<i class="fas fa-gem fa-7x"></i>
<i class="fas fa-gem fa-8x"></i>
<i class="fas fa-gem fa-9x"></i>
<i class="fas fa-gem fa-10x"></i>
Color
You can change the color of the icons the same way you change the color of the text, i.e. using text- + color class.
<i class="fas fa-gem fa-3x text-primary me-2"></i>
<i class="fas fa-gem fa-3x text-secondary me-2"></i>
<i class="fas fa-gem fa-3x text-success me-2"></i>
<i class="fas fa-gem fa-3x text-danger me-2"></i>
<i class="fas fa-gem fa-3x text-warning me-2"></i>
<i class="fas fa-gem fa-3x text-info me-2"></i>
<i class="fas fa-gem fa-3x text-dark me-2"></i>
Lists
From HTML, you know 2 basic types of lists:
Ordered list
- Lorem
- Ipsum
- Dolor
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
And unordered list
- Lorem
- Ipsum
- Dolor
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
The thing is, though bullets and numbers are useful, they can also seem dull and bland.
So how about using our new knowledge of icons to replace the default lists with some fancy lists with colored icons?
First, however, we need to remove the default bullets from the list. We can do this by adding a list-unstyled class to the list.
- Lorem
- Ipsum
- Dolor
<ul class="list-unstyled">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
Now we can combine it with icons and create compositions like:
- What is the latest version?
- What are the changes in the latest version compared to the previous one?
- Is the latest version stable already?
<ul class="list-unstyled">
<li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>What is the latest version?</li>
<li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>What are the changes in the latest
version compared to the previous one?</li>
<li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>Is the latest version stable already?
</li>
</ul>
- Now it is even easier, lighter and better
- Improved documentation
- Improved modularity
<ul class="list-unstyled">
<li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Now it is even easier, lighter and better</li>
<li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Improved documentation</li>
<li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Improved modularity</li>
</ul>
- Hundreds of additional quality components
- Much better design
- Integration with TypeScript
<ul class="list-unstyled">
<li class="mb-1"><i class="fas fa-check-circle me-2 text-success"></i>Hundreds of additional quality components</li>
<li class="mb-1"><i class="fas fa-check-circle me-2 text-success"></i>Much better design</li>
<li class="mb-1"><i class="fas fa-check-circle me-2 text-success"></i>Integration with TypeScript</li>
</ul>
Complete the "Details" section
Now let's use the new knowledge gained from this lesson and complete the "Details" section with valuable information supported by a custom list with colored icons.
Add this code to the second column in the "Details" section (of course, you can change the content to your liking.):
<div class="col-lg-5">
<h3 class="fw-bold mb-4">Details</h3>
<p>This beginner-friendly, example-based course will guide you through the essential knowledge of MDB
ecosystem.</p>
<p class="mb-2"><strong>What will you learn:</strong></p>
<ul class="list-unstyled">
<li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>
<li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>
<li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>
<li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>
</ul>
<a class="btn btn-link btn-rounded" href="#" role="button" data-mdb-ripple-color="primary">Learn more</a>
</div>
After saving the file and refreshing the browser you should see content like this:
Details
This beginner-friendly, example-based course will guide you through the essential knowledge of MDB ecosystem.
What will you learn:
- Bootstrap
- MDBootstrap
- UI & UX design
- Responsive web design
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.