Aligning icons in css and html

by vsasikalabe Updated: Mar 14, 2023

Guide Kit

Building responsive navigation icons for websites is a challenging task. Working on an admin panel, you must design and develop a vertical menu with sub-categories. All the icons in the icon libraries should follow some of the properties of the CSS (size, color, position, etc.)

Our Sidebar navigation can make your application easier by providing a simple template. 2 main elements write the HTML structure:

A header (tag) element
A main (tag) element

A header (tag) element Contains the website logo, the search form, and the navigation trigger.

A main (tag) element containing the page's main content and the sidebar navigation. At the same time, the CSS code contains many features for alignment. The sidebar will take the full-screen height(100%), and the width is 180px—the position of the sidebar relative to the browser sidebar. The sidebar elements appear on top of the other element. The top margin is fixed at 0px. The left margin sets the sidebar off the screen. The padding will be 15px. The text-decoration is none, so this stops the underline of link elements. Set the font size of sidebar links to 20px. .sidebar hover left is declared as 0, so On mouse over the sidebar should appear on the screen.

Here is an example of how to align the icons in CSS and HTML:

Preview of the output that you will get on running this code from your IDE.

Code

Aligning icons in css and html

HTMLLines of Code : 56License : Strong Copyleft (CC BY-SA 4.0)

/* Style the full height sidebar */
.sidebar {
    height: 100%; /* Sidebar will take the full screen height */
    width: 180px; /* Sidebar width */
    position: absolute; /* Position the sidebar relative to the browser window */
    z-index: 1; /* Appears on top of other elements */
    top: 0px; /* Top margin of 0px */
    left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
    padding: 10px 5px 5px 10px; /* Padding 15px */
    background-color: #111; /* Background color */
    overflow-x: hidden;
}

.sidebar a {
    text-decoration: none; /* This stops the underline on link elements */
    font-size: 20px; /* Set font size of sidebar links */
    color:#818181; /* Set font color of sidebar links */
    display: block;
    padding: 10px; /* Same as the sidebar */
}

.sidebar a:hover {
    text-decoration: none; /* This stops the underline on link elements */
    color: #f1f1f1; /* On mouse over change font color of sidebar links */
}

.sidebar:hover {
    left: 0;    /* On mouse over the sidebar should appear on screen */
}
i {
    float: right;
}
<html>
<head>
      <title>Master Tracker</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Load a font library -->
      <link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
      <!-- Load an icon library -->
      <script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
<body>
<div class="sidebar">
            <a href="#home"><i style="text-align: right;" class="fa fa-fw fa-home"></i> Home </a>
            <a href="#archive"><i style="text-align: right;" class="fas fa-archive"></i></i> Archive </a>
            <a href="#newfile"><i style="text-align: right;" class="fas fa-folder-open"></i> New File </a>
            <a href="#analytics"><i style="text-align: right;" class="fas fa-chart-pie"></i> Analytics </a>
            <a href="#contacts"><i style="text-align: right;" class="fas fa-address-book"></i> Contacts </a>
            <a href="#putoutfire"><i style="text-align: right;" class="fas fa-dumpster-fire"></i> Hero </a>
            <a href="#search"><i style="text-align: right;" class="fas fa-search"></i> Search </a>
            <a href="#help"><i style="text-align: right;" class="fas fa-life-ring"></i> Help </a>
          </div>
</body>
</html>

Instructions

Follow the steps carefully to get the output easily.

Download and Install VS Code on your Desktop.
Open the VS Code and install Live Server from Extensions.
Open the new file and save as filename.html.
Copy the code using the "Copy" button above, and paste it into your html file (paste css style code within the style tag).
Click Go live button in the bottom right corner to get the output.

I hope you found this useful. I have added version information in the following sections.

I found this code snippet by searching for ' Aligning icons in css and html ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
Live Server v5.7.9

Using this solution, we are able to align icons using CSS and HTML with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to align icons.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Aligning icons in css and html

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow