display: flex shows underlined icons

Question

if I align my icons within my navbar with display: flex, it shows an underline below my icons. If I disable it, they disappear but my icons aren't align properly. See images below.

How can I get rid of them?

<-->

Here's the code:

.nav {
  width: 60px;
  height: 100vh;
  top: 100px;
  min-height: 100vh;
  background-color: #cccccc;
  position: fixed;
  z-index: 999;
  opacity: .4;
  border-right: 1px solid black;
  display: flex;
  flex-direction: column;
}

.nav a {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
  <a href=""><i class="material-icons">home</i></a>
  <a href=""><i class="material-icons">shopping_basket</i></a>
  <a href=""><i class="material-icons">business</i></a>
  <a href=""><i class="material-icons">mail</i></a>
  <a href=""><i class="material-icons">card_giftcard</i></a>
</div>

Your question is a little vague, but you can pass any information about the image ? Are you getting those from fontawesome ? You that created those ? Wich tag you put in those icons ? — Marcelo, Jan 25 '18 at 07:43
Sorry added the code, and I'm using material design icons: and never had problems before — bene-we, Jan 25 '18 at 07:44
@Sharvan you have to remove the last to characters from the link, then it's working — bene-we, Jan 25 '18 at 07:59

Bhuwan · Accepted Answer · 2018-01-25T07:53:53.810

<a> tags have text-decoration:underline by default, thats why the line is coming below.

Apply text-decoration: none to your anchor tags .nav a

Stack Snippet

.nav {
  width: 60px;
  height: 100vh;
  top: 100px;
  min-height: 100vh;
  background-color: #cccccc;
  position: fixed;
  z-index: 999;
  opacity: .4;
  border-right: 1px solid black;
  display: flex;
  flex-direction: column;
}

.nav a {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  text-decoration: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
  <a href=""><i class="material-icons">home</i></a>
  <a href=""><i class="material-icons">shopping_basket</i></a>
  <a href=""><i class="material-icons">business</i></a>
  <a href=""><i class="material-icons">mail</i></a>
  <a href=""><i class="material-icons">card_giftcard</i></a>
</div>

Asons · Answer 2 · 2018-01-25T08:53:46.253

The reason there is no underline prior to adding display: flex, is because the <i> is set to display: inline-block, for which the underline doesn't render.

Why does display: inline-block; remove an underline from a child element?

When the display: flex is added, the display: inline-block on the <i> won't be applied anymore, since flex items are block like elements.

What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

Adding text-decoration: none to a will fix this

Since the a has a fixed height, an alternative is to drop display: flex and use text-align/line-height to center the icon.

.nav {
  width: 60px;
  height: 100vh;
  top: 100px;
  min-height: 100vh;
  background-color: #cccccc;
  position: fixed;
  z-index: 999;
  opacity: .4;
  border-right: 1px solid black;
  display: flex;
  flex-direction: column;
}

.nav a {
  width: 100%;
  height: 60px;
  border: none;
  text-align: center;
  
}

.nav a i {
  line-height: 60px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav">
  <a href=""><i class="material-icons">home</i></a>
  <a href=""><i class="material-icons">shopping_basket</i></a>
  <a href=""><i class="material-icons">business</i></a>
  <a href=""><i class="material-icons">mail</i></a>
  <a href=""><i class="material-icons">card_giftcard</i></a>
</div>

score 1 · Answer 3 · answered Jan 25 '18 at 07:49

1

Try text-decoration: none; for your link

answered Jan 25 '18 at 07:49

Sebastian Heinrich

84
5

display: flex shows underlined icons

3 Answers3