icon bar customisation in html and css

问题

I am trying to customise the following icon bar (as shown in w3schools) - code pasted below along with link, to display like the image shown. The icons need to have text right underneath them (labels). This is NOT trivial as you'll see if you continue to read the description of the problem. Furthermore, I'd like to add hover-over text to these icons, as shown.

Any solutions/suggestions appreciated.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}

.icon-bar {
    width: 100%;
    background-color: #666;
    overflow: auto;
}

.icon-bar a {
    float: left;
    width: 20%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #44444 !important;
}
</style>
<body>

<div class="icon-bar">
  <a href="signup.php"><i class="fa fa-user"></i></a> 
  <a href="challenges.php"><i class="fa fa-mortar-board"></i></a> 
  <a href="login.php"><i class="fa fa-eye"></i></a> 
  <a href="series.php"><i class="fa fa-download"></i></a>

</div>

</body>
</html>

In the image shown, the icon bar is placed over a green background image. I would like the text to appear directly underneath, and for there also to be hover-over text to appear.

I have tried the below, but it is incredibly difficult to get the layout correct. Is there a better way?

<div class="icon-bar">
  <a href="signup.php"><i class="fa fa-user"></i></a> 
  <a href="challenges.php"><i class="fa fa-mortar-board"></i></a> 
  <a href="login.php"><i class="fa fa-eye"></i></a> 
  <a href="series.php"><i class="fa fa-download"></i></a>

</div>
<br>
<br>

    <br>
    <br>
    <br>

    <br>    
    <br><br>
    <br>
    <br>

    <br>    
    <br>
    <p><font color="white">Topic1  &nbsp;&nbsp;&nbsp;&nbsp;    &nbsp;&nbsp;&nbsp;                    Topic2      &nbsp;&nbsp;&nbsp;                   Topic3        &nbsp;&nbsp;&nbsp;&nbsp;                Topic4</font></p>
    <br>
    <br>
    <br>
    <br>

Furthermore, a design flaw with adding text that way is on mobile sites the formatting will be entirely lost. see image below.

Any ideas to most effectively do this would be a great help!

回答1:

this is for the w3 school code I just changed the way of writing the icon and the text .

its not possible to look the iconbar same way in all screen size either put dropdown button or vertical display ,I have written that for vertical display ,. I havent changed padding . Since i dont know much what you want

I can help you with bootstrap if you want in bootstrap i think that will be easy for you .

 <!DOCTYPE html>
  <html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
  awesome/4.7.0/css/font-awesome.min.css">
  <style>
     body {margin:0;}
    .icon-bar {
       width: 100%;
       background-color: #555;
       overflow: auto;
     }

    .icon-bar a {
       float: left;
       width: 20%;
       text-align: center;
       padding: 12px 0;
       transition: all 0.3s ease;
       color: white;
       font-size: 36px;
    } 

    .icon-bar a:hover {
       background-color: #000;
      }

    .icon-bar a{
       text-decoration:none;

    }

   .active {
    background-color: #4CAF50 !important;
    }

  @media only screen and (max-width: 700px) {
    .icon-bar a {
    width:100% !important;
   }
}

  </style>
  <body>

 <div class="icon-bar">
   <a class="active" href="#">
   <ul style="list-style:none">
    <li><i class="fa fa-home"></i></li>
    <li>home</li>
  </ul>
  </a> 
  <a href="#">
     <ul style="list-style:none" class="menu_ul">
      <li><i class="fa fa-search"></i></li>
      <li>search</li>
     </ul>
 </a> 
  <a href="#">
    <ul style="list-style:none" class="menu_ul">
      <li><i class="fa fa-envelope"></i></li>
      <li>mail</li>
   </ul>
  </a> 
  <a href="#">
     <ul style="list-style:none" class="menu_ul">
       <li><i class="fa fa-globe"></i></li>
       <li>web</li>
    </ul>
  </a>
  <a href="#">
   <ul style="list-style:none" class="menu_ul">
    <li><i class="fa fa-trash"></i></li>
    <li>delete</li>
   </ul></a> 
 </div>

</body>

回答2:

Try this,

.icon-bar{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.icon-bar a {
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

This will affect all the a tags of .icon-bar class.

Also here's some documentation on how display flex works, https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源：https://stackoverflow.com/questions/48225355/icon-bar-customisation-in-html-and-css

标签

html

css

icons