CODEWITHSUNDEEP
htmlcssfont-awesome
Reez0
Reez0

Reputation: 2689

Displaying Font Awesome icon above button text

I need a button to look like the button in the image:

When I add the fontawesome icon to the button it shows, but I'd like it to display on top of the text if that's possible?

.button-examples {
  background-color: #0C3E7e;
  margin-top: 50px;
  height: 130px;
  border-radius: 15px 15px 15px 15px;
  margin-left: 10px;
  font-weight: 600;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button-examples">
    <i class="fa fa-users" aria-hidden="true"></i>
    See client examples
</button>

Button

Upvotes: 3

Views: 2550

Answers (6)

Penny Liu
Penny Liu

Reputation: 17388

You can use flex-direction: column in .button-examples like so:

.button-examples {
  display: flex;
  /* The direction in which lines of text are stacked */
  flex-direction: column;
  align-items: center;
  background-color: #0C3E7e;
  padding: 8px;
  border-radius: 15px;
  font-weight: 600;
  color: white;
  width: 100px;
}

.button-examples p {
  font-size: .8rem;
  margin: 0 auto;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<button class="button-examples">
  <i class="fas fa-users fa-3x" aria-hidden="true"></i>
  <p>See client examples</p>
</button>

Upvotes: 1

zer00ne
zer00ne

Reputation: 43870

Wrap the text in a block element (<p>, <div>, etc). Details commented in HTML\CSS.

.button {
  background-color: #0C3E7e;
  margin-top: 50px;
  margin-left: 10px;
  padding: 10px; /* Center icon and text */
  width: 130px; /* Needs width defined */
  height: 130px; 
  border-radius: 15px; /* One value for four identical sizes*/
  font-weight: 600;
  color: #fff; /* As per screenshot */
}

/* A block element (<p>) is wrapped around text in order
to place it under the icon and allow it to have a
different font-size than the icon */
.button p {
  font-size: 1rem;
  margin: 0 auto;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<button class="button">
<!--.fa-3x makes icon 3 times the regular size-->
    <i class="fas fa-users fa-3x" aria-hidden="true"></i>
    <p>See client examples</p>
</button>

Upvotes: 0

HAPPY SINGH
HAPPY SINGH

Reputation: 586

You can use the code below.

HTML code:
    <button class = "button-examples">
      <i class="fa fa-users" aria-hidden="true"></i>
      See client examples
    </button>

CSS code: 
   .button-examples {
    margin: 0 auto;
    height: 110px;
    width: 110px;
    border-radius: 15px;
    border: none;
    background: #0C3E7e;
    color: #fff;
    text-align: center;
}
.button-examples i{
    font-size:45px;
}

Upvotes: -1

elveti
elveti

Reputation: 2376

Add

.button-examples i {
  display: block;
}

to force a line-break between the icon and the text. See: https://jsfiddle.net/9b5304ps/

Upvotes: 4

ravibagul91
ravibagul91

Reputation: 20755

Just add <br/> like this,

<button class = "button-examples">
    <i class="fa fa-users" aria-hidden="true"></i><br/>
    See client examples
</button>

OR, simple make you icon as block level element

.button-examples i{
      display:block;
}

Demo

Upvotes: 2

Dylan KAS
Dylan KAS

Reputation: 5663

You can do it like this :

https://jsfiddle.net/9ahf4ymg/

<button class = "button-examples">
    <i class="fa fa-users icon" aria-hidden="true"></i>
    <p>
      See client examples
    </p>
</button>

And css

.icon{
  font-size: 48px;
  color: white;
}
.button-examples{
    background-color:#0C3E7e;
    margin-top:50px;
    height:130px;
    border-radius: 15px 15px 15px 15px;
    margin-left:10px;
    font-weight:600;
    color: white;
}

Upvotes: 1

Related Questions