Skip to main content
Practice

Styling Buttons in Menus

Let's learn how to style buttons in menus and add icons.

Button Style in Menu
.navbar .btn {
  margin-right: 24px;
}
  • margin-right: 24px;: Sets the right margin to 24px.
Icon Style in Menu Button
.fas.fa-arrow-right {
  margin-left: 8px;
  font-size: 14px;
}
  • margin-left: 8px;: Sets the left margin to 8px, providing a natural spacing for the arrow icon within the button.
  • font-size: 14px;: Sets the font size of the icon to 14px.

How to Add Icons​

There are several ways to add icons.

Besides drawing them yourself or using images, you can also utilize icon libraries like fontawesome.

Importing fontawesome Library
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
  integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
  crossorigin="anonymous"
/>

To use icons, include the fontawesome library's CSS file via the <link> tag.

Using fontawesome Library
<i class="fas fa-arrow-right"></i>

With the fontawesome library, you can easily add icons by specifying the icon's name in the class attribute, such as fas fa-arrow-right.

Additionally, you can explore various icons on fontawesome's official website and use them in your project.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.