Add a variety of icons to every item in a list using HTML

Is there a way to display multiple icons on the left side of each element, with the option to have none or many? If so, could you please guide me in the right direction.

<header>
  <nav>
    <ul>
      <a href="http://localhost:4000/">
        <li class=" current btn-nav ">Blog</li>
      </a>
      <a href="http://localhost:4000/Projects">
        <li class=" btn-nav ">Projects</li>
      </a>
      <a href="http://localhost:4000/About">
        <li class=" btn-nav ">About</li>
      </a>
    </ul>
  </nav>
</header>

Appreciate any help!

htmlcssweb

Answer №1

.navbar {
  display: grid;
}

.btn-nav::before {
  content: "😂😅";
}
/* unicode for other symbols can be copied from here */

  <header>
    <nav>
      <div class="navbar">
        <span class="btn-nav">
          <a href="http://localhost:4000/">
            Home
          </a>
        </span>
        <span class="btn-nav">
          <a href="http://localhost:4000/Services">
            Services
          </a>
        </span>
        <span class="btn-nav">
          <a href="http://localhost:4000/Contact">
            Contact
          </a>
        </span>
      </div>
    </nav>
  </header>

You can utilize the ::before css selector to insert content before an HTML element. Live Demo

Answer №2

Have you checked out the Font Awesome website at https://fontawesome.com/? It's an amazing library of icons that you can use for free.

For example, you can use this arrow icon:

<a href="http://localhost:4000/">
<i class="fas fa-arrow-right"></i>
        <li class=" current btn-nav ">Blog</li>
      </a>

After adding the icon to your HTML, you can then style it using CSS.

I hope this information is helpful to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive JavaScript button that navigates me to a document without the need to click

I'm facing an issue with my small project. I've been learning javascript and managed to create a script that calculates the square of a number provided by the user. var checkIt = function(){ var theNumber = Number(prompt("Please enter a number ...

javascriptjqueryhtml

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

javascripthtmlcssflexbox

Creating Functional Tabs Using CSS and JavaScript

I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today ta ...

javascriptjqueryhtmlcss

Creating an interactive website by utilizing fundamental HTML/CSS along with PHP or WordPress

I need to create a customized website for my project, which should include an admin dashboard for the site owner to modify specific visual components as needed. My main concern is whether I should rely solely on core PHP, HTML, and CSS for this task. Ca ...

phphtmlwordpressweb

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...

javahtmlcssselenium

Tips for accessing a child element within a specific div from a selection of divs in Angular

I recently started learning angular and I am working on a project that involves displaying a list of people. Each person's name is displayed along with a button to send a friend request. When the send request button is clicked, it should disappear and ...

htmlangularangularjs-directive

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content: html, body { height: 100%; margin: 0; } .container { display: flex; flex-direction: row; height: 100%; } .sidebar { ...

javascripthtmlcss

What is the best method to display each HTML output on a separate line using Python?

As a beginner, I am working on a small project involving webscraping. My goal is to print the lyrics of a song with each line on a separate line using Beautiful Soup in Python. However, the output I'm getting looks like this: I looked out this mornin ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

I have successfully created a json File containing an array of "learnobjects", each including an id, name, and link. Check out my plnkr example var myMessage = { "learnobjects": [{ "id": "1", "name": "Animation-Basics", "link": "animation_bas ...

javascripthtmlangularjsjsondom

how to dynamically update a button's text using Vue.js

I have a challenge where I need to dynamically change the text of a button based on whether a value is true or false. Below is the code snippet that I have been working on: <button class="btn btn-primary table-button" type="button&quo ...

javascripthtmlvue.jsbuttonwatch

Employ jQuery to set values for hidden input elements

I'm facing an issue where I need to assign a value to a hidden field on a form that I attach to a div when a button is clicked. Below is the snippet of my HTML code: <div style="margin-bottom:5px" class="comment" data-commentID="<?php echo $c- ...

phpjqueryhtml

I am looking to navigate between tabs on a multi-part form in order to submit all the form data

My current form consists of five questions, each on a separate tab. What I am trying to achieve is the following: When the user submits the form data on the fifth tab An Ajax request sends the form data to a background script for processing Simultaneousl ...

phpjqueryhtmlajaxtwitter-bootstrap

What is the best way to prevent 2 divs from overlapping on a webpage?

I'm having trouble getting the smaller div to display right below the larger red div. I tried using the display block css property, but it doesn't seem to be working as expected. Unfortunately, I can't provide an image here, but you can vie ...

htmlcss

What is an html5 tooltip widget?

I stumbled upon a helpful tutorial on html5canvastutorials.com that caught my eye: let triangle = new Kinetic.Shape(function(){ let ctx = this.getContext(); ctx.beginPath(); ctx.lineWidth = 4; ...

htmlcanvastooltiphtml5-canvaskineticjs

Designing the KendoUI combo box with a touch of style

Is there a way to customize the style of required and invalid fields for KendoUI elements, such as changing the background color of a required input field? I have been using the following styles: .k-textbox>input[required], .k-picker-wrap .k-input[re ...

cssvalidationstyleskendo-uikendo-combobox

The functionality of a pop-up window is not compatible with Google Maps

I recently implemented a script on my webpage that triggers a popup window every time the page is loaded. Here's how the script looks: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ColorBox de ...

javascriptjqueryhtmlcss

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

javascriptjqueryhtml

Div element positioned outside of another div element

I hate to bug you with more css issues, but I'm really struggling with this one. The problem I'm facing is that a sub div is overflowing the boundaries of its parent div. I tried using: display: inline-block;` but then the outer div goes haywir ...

htmlcss

When I view the website on a tablet in landscape mode, the navigation bar vanishes

I just finished creating a responsive menu for a website. Here's how it works: when viewing the site on a regular browser with a width less than 768px, the navigation menu items are stacked and hidden. To reveal them, the user needs to click on a tog ...

jqueryhtmlcsstwitter-bootstrapresponsive-design