Lecture

Styling Buttons in Navigation Menus

Learn how to style buttons and create icons within navigation menus.

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

  • font-size: 14px;: Sets the font size of the icon to 14px.


How to Create Icons

There are various ways to create icons.

Aside from drawing them or using images, you can utilize icon libraries such as 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" />

Use the <link> tag to import the CSS file from the fontawesome library for icon use.

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

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

Additionally, you can search and use various icons from the official fontawesome website.

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help