Question

我需要一个按钮才能看起来像图像中的按钮：

当我将fontawesome图标添加到显示的按钮时，但如果可能的话，我希望它显示在文本上方？

HTML：

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

CSS：

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

}

Answer 1

您可以这样：

https://jsfiddle.net/9ahf4ymg/

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

和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 2

只需添加<br/>，

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

或者，简单地让您将图标作为块级元素

.button-examples i{
      display:block;
}

Demo

Answer 3

添加

.button-examples i {
  display: block;
}

强制在图标和文本之间换行。参见：https://jsfiddle.net/9b5304ps/

Answer 4

您可以在.button-examples中使用flex-direction: column，如下所示：

.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

将文本包装在一个块元素中（<p>，<div>等）。详细信息以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;
}

在按钮文字上方显示字体真棒图标

6 个答案: