在按钮文本上方显示 Font Awesome 图标
Displaying Font Awesome icon above button text
我需要一个看起来像图片中的按钮的按钮:
当我将 fontawesome 图标添加到它显示的按钮时,但如果可能的话,我希望它显示在文本之上?
.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>
你可以这样做:
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;
}
像这样添加<br/>
,
<button class = "button-examples">
<i class="fa fa-users" aria-hidden="true"></i><br/>
See client examples
</button>
或者,简单地让你的图标成为块级元素
.button-examples i{
display:block;
}
添加
.button-examples i {
display: block;
}
在图标和文本之间强制换行。参见:https://jsfiddle.net/9b5304ps/
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;
}
将文本包装在块元素中(<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>
您可以像这样在 .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>
我需要一个看起来像图片中的按钮的按钮:
当我将 fontawesome 图标添加到它显示的按钮时,但如果可能的话,我希望它显示在文本之上?
.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>
你可以这样做:
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;
}
像这样添加<br/>
,
<button class = "button-examples">
<i class="fa fa-users" aria-hidden="true"></i><br/>
See client examples
</button>
或者,简单地让你的图标成为块级元素
.button-examples i{
display:block;
}
添加
.button-examples i {
display: block;
}
在图标和文本之间强制换行。参见:https://jsfiddle.net/9b5304ps/
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;
}
将文本包装在块元素中(<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>
您可以像这样在 .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>