[英]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>
只需像这样添加<br/>
,
<button class = "button-examples">
<i class="fa fa-users" aria-hidden="true"></i><br/>
See client examples
</button>
或者,简单地让你的图标成为块级元素
.button-examples i{
display:block;
}
你可以这样做:
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;
}
您可以像这样在.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>
将文本包装在块元素( <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>
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.