Jump to content
ScotBlue

w3-bar-item not lining up with icons

Recommended Posts

Does anyone have any suggestions, or can help me with the following please:

I am using w3.css for the first time, but I am struggling to line-up google icons with the text (using the w3-bar-item and w3-button classes) in my navigation bar.

I have tried adding my own css (relative positioning, padding-bottom/top, and even changing the font size of both icon and text) but nothing seems to work.

I have also gone through w3 references, but can't find the appropriate class that might make the icons and text line up properly.

Any help would be very much appreciated.

<div id="topnav1" class="w3-bar">
  <a href="#" class="w3-bar-item w3-button"><i class="material-icons" style="font-size:23px;color:#272828;">phone_iphone</i>01382 339 605</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">directions_bus</i>Minibus Hire</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">build</i>Autocare</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">mail</i>Contact Us</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">navigation</i>Visit Us</a>
  <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">MENU &#9776;</a>
</div>
<div id="topnav2" class="w3-bar-block w3-hide w3-hide-large w3-hide-medium">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...