menu featuring a creative favicon and an accompanying label

I am aiming to replicate this menu design:
It consists of a flavicon with a label below it. Menu

I attempted to create it in two different ways, but both attempts were unsuccessful. Using Bootstrap groups.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">




    <div class="btn-group  btn-group-lg" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-secondary"><span class="fas fa-home"></span></button>   <label for="btn">label</label> 
           <button type="button" class="btn btn-secondary"><i class="fa fa-book-open"></i></button>
            <button type="button" class="btn btn-secondary"><i class="fa fa-shopping-cart"></i></button>
          <button type="button" class="btn btn-secondary"><i class="far fa-address-card"></i></button>
      </div>
    
    <p> <p>
    Another attempt:
    <p>  <p>
    
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    
 <div class="btn-group-lg form-group"  >
       <button type="button" id="btn"  class="btn btn-secondary form-control"><span class="fas fa-home"></span></button> 
         <label for="btn">label</label>
    
           <button type="button" id="btn2"  class="btn btn-secondary form-control"><span class="fas fa-home"></span></button> 
         <label for="bt2n">label</label>
  </div>

cssbootstrap-4

Answer №1

If you're looking for a unique approach, you might want to consider using radio buttons styled as buttons. The Bootstrap documentation provides a helpful guide on how to achieve this: https://getbootstrap.com/docs/4.4/components/buttons/

By adding some custom styling, you can effectively use buttons in place of traditional radio buttons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active"><i class="fas fa-home"></i><br />
    <input type="radio" name="options1" id="option1" checked>Button text
  </label>
  <label class="btn btn-secondary"><i class="fa fa-book-open"></i><br />
    <input type="radio" name="options2" id="option2">Button text
  </label>
  <label class="btn btn-secondary"><i class="fa fa-shopping-cart"></i><br />
    <input type="radio" name="options3" id="option3">Button text
  </label>
  <label class="btn btn-secondary"><i class="far fa-address-card"></i><br />
    <input type="radio" name="options4" id="option4">Button text
  </label>
</div>

Answer №2

Utilize the d-block bootstrap class for the fa icon span tag and enclose the label inside a button as shown below

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">




    <div class="btn-group  btn-group-lg" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-secondary"><span class="fas fa-home d-block"></span><label for="btn">label</label></button>    
           <button type="button" class="btn btn-secondary"><i class="fa fa-book-open d-block"></i><label for="btn">label</label></button>
            <button type="button" class="btn btn-secondary"><i class="fa fa-shopping-cart d-block"></i><label for="btn">label</label></button>
          <button type="button" class="btn btn-secondary"><i class="far fa-address-card d-block"></i><label for="btn">label</label></button>
      </div>
    
    <p> <p>
    Another attempt:
    <p>  <p>
    
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

Answer №3

One alternative approach would be to utilize the standard Bootstrap menu structure and integrate your icons within it.

Opting for the traditional unordered list has its benefits, such as improved accessibility for screen readers which recognize it as a menu, whereas a lineup of buttons might cause confusion.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.far, .fa, .fas {
    display: block;
}
.nav-link {
    text-align: center;
}
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
    color: #fff;
}

.navbar-light .navbar-nav .nav-link, 
.navbar-light .navbar-brand {
    color: #fff;
}
.navbar {
    color: #fff;
    background-color: #940000 !important;
}
</style>


<nav class="navbar navbar-expand navbar-light bg-light">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#"><span class="fas fa-home"></span>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fa fa-book-open"></i>Open</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fa fa-shopping-cart"></i>Cart</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="far fa-address-card"></i>Address</a>
            </li>
        </ul>
    </div>
</nav>

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

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

htmlcss

Main Article Holder containing Image overlaid with Post Details

I'm struggling to achieve something seemingly simple but can't quite get it to work. My goal is to display article previews on my website in a tiled format. For example, the tiles would have a fixed height and width, say 300px by 300px. I&apos ...

htmlcss

Tips for effectively overlaying one container on top of another in a responsive manner

There are a pair of containers. The main container functions as the parent, while the child container acts as a tag to categorize the content. The objective is to position the tag container at the top right corner of the main content container, slightly of ...

javascriptcssreactjs

Resolving the Table Issue with 'onclick' in Javascript

Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

javascripthtmlcss

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Is it possible to incorporate a static lighting effect overlay using HTML/CSS? My project consists of an HTML5/JS app with a top navigation bar and a series of cards that are transitioned through using swipe gestures. These cards are displayed in gray ove ...

javascripthtmlcss

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...

javascripthtmlcss

Bootstrap 5 - multiple columns of equal width, except for one that fills the remaining space

Imagine a situation where I am using Bootstrap 5 and have the following code snippet... <div class="container"> <div class="row row-cols-auto"> <div class="col">One</div> <div class="c ...

cssbootstrap-5col

CSS: Concealing a separate div

I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript. Take a look at my Fiddle here <div class="parrent"> <div id ...

javascripthtmlcsssiblings

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

Troubleshooting the Div Ordering Problem in Bootstrap 4

Currently, I am using Bootstrap 4 and facing an issue with the layout order. Despite searching for a solution extensively, I have not been able to get it right or find one in the archives. Here is what I need... For desktop view, the layout should appear ...

csstwitter-bootstrapbootstrap-4

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Leveraging the power of dual CSS classes for a single element

Can you help me troubleshoot this? I have a .social div, and I want zero padding on the top for the first one, and no bottom border for the second one. I tried creating classes for the first and last scenarios, but it seems like something is off: .socia ...

cssclass

Tips for ensuring only one submenu is open at a time

I have successfully created a responsive menu that is working well. However, I am facing an issue. I want only one menu to be open at a time. When a submenu is opened, the other menus should be hidden. How can I achieve this? Below is my Script code $( ...

javascriptjqueryhtmlcss

Is there a way to attach numerical values to CSS in order to generate a timeline effect?

My goal is to arrange div elements on a timeline based on an array of floats ranging from 0 to 1. The idea is to have the elements positioned along the timeline according to these float values, with 0 representing the beginning and 1 indicating the end. ...

htmlcssangular

What could be causing the next button to not display the content on the following page when clicked?

Hello, I'm new to programming and I'm working on creating a complaint page using Bootstrap, CSS, and JavaScript. I encountered an issue when trying to hide the content of the next page using the following CSS code: .needs-validation fieldset:not( ...

htmlcssbootstrap-4

Unable to place a div below another div

I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome. Currently, the website looks like this: https://i.stack.imgur.com/ItOcp.jpg However, I e ...

htmlcss

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

javascripthtmlcss

The window fails to retain the scroll position when overflow is enabled

Whenever I click on a specific div, I use jQuery to dynamically apply overflow: hidden to the html and body. $(".mydiv").on("click", function() { $("html, body").css("overflow", "hidden"); }); However, this action causes the window to scroll to the to ...

javascriptjqueryhtmlcss

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempti ...

javascripthtmlcss