在按钮文本上方显示 Font Awesome 图标

Question

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>

Answer 1

Add

.button-examples i {
  display: block;
}

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

Answer 2

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

Answer 3

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;
}

Answer 4

You can useflex-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>

Answer 5

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>

Answer 6

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;
}