CODEWITHSUNDEEP
htmlcss
The Dead Man
The Dead Man

Reputation: 5566

Displaying font awesome icon above button text as a link

I have a simple sidebar which contains links with icons,

Here is expected results

enter image description here

So far here is what I have tried

HTML

 <ul class="sidebar">
      <li>
      <a href="" >
        <span class="fa fa-info-circle" > </span>
        create movie
      </a>
    </li>
      <li><a href="" >
        <span class="fa fa-info-circle" > </span>
        something
      </a>
    </li>
    </ul>

Here is css

li{
    background-color: #464646;
    color: white;
    overflow: hidden;
    height:61px;
    font-weight:600;
    margin-bottom: 0px;
    text-decoration: none;
    width: 100px;
    list-style: none;
    color: white;


    }
    li a{
      color: white;
      display: block
    }

Here is jsfiddle

li {
  background-color: #464646;
  color: white;
  overflow: hidden;
  height: 61px;
  font-weight: 600;
  margin-bottom: 0px;
  text-decoration: none;
  width: 100px;
  list-style: none;
  color: white;
}

li a {
  color: white;
  display: block
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<ul class="sidebar">
  <li>
    <a href="">
      <span class="fa fa-info-circle"> </span> create movie
    </a>
  </li>
  <li>
    <a href="">
      <span class="fa fa-info-circle"> </span> something
    </a>
  </li>
</ul>

demo

Unfortunately, am struggling to display icon above the text

Upvotes: 0

Views: 209

Answers (2)

sonic
sonic

Reputation: 1431

Just make title in another span so that you can add to it also "display: block"

li a span{
  display: block;
}

<span class="fa fa-info-circle" > </span>
<span class="title">create movie </span>

https://jsfiddle.net/9xqbo61g/

keep in mind that in .fa class there is display: inline-block so only your .title would have display: block. if you add text-align: center to the a href element your icon will be centered.

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 114991

Flexbox can do that.

li {
  background-color: #464646;
  color: white;
  overflow: hidden;
  height: 61px;
  font-weight: 600;
  margin-bottom: 0px;
  text-decoration: none;
  width: 100px;
  list-style: none;
  color: white;
}

li a {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li a span:before {
  display: inline-block;
  /* removes text-decoration */
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo</title>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <ul class="sidebar">
    <li>
      <a href="">
        <span class="fa fa-info-circle"> </span> create movie
      </a>
    </li>
    <li>
      <a href="">
        <span class="fa fa-info-circle"> </span> something
      </a>
    </li>

  </ul>
</body>

</html>

Upvotes: 2

Related Questions