css - 将 Font-Awesome-5 图标放置为 Bootstrap-4 卡片背景
问题描述
我想使用 Bootstrap-4 使用 Font Awesome 5 图标作为卡片背景图像!
我尝试了从互联网上找到的所有内容,但没有任何效果。
我正在使用 Angular2 (v8) 和 Bootstrap 4。
解决方案
以下代码对我有用。我已经简化了我使用的内容,但您仍然会得到一个很棒的字体图标作为背景,您可以在其上放置文本:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>TITLE</Strong></h3>
<h4 class="title-bg text-outline">Subtitle</h4>
<h4 class="title-bg text-outline"><Strong> Subtitle</Strong></h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 2nd HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 3rd HELLO</Strong></h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.big-centered-icon {
font-size: 144px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.class-box{ text-align:center;position:relative;margin:8px;width: 100%;padding-bottom: 75%}
div.class-box > div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;padding-top:15%}
.class-box .title-bg{font-size:24px;color:#000;}
推荐阅读
- pyspark - 如何使用 pyspark 比较 2 个 JSON 模式?
- python - 检查新条目是否已在 csv 文件中
- javascript - 如何在动漫js函数中调用函数
- java - 如何处理 Firebase 实时数据库中嵌套回调期间的错误?
- plaid - 在谷歌函数中使用格子是行不通的
- objective-c - 如何使用 swift 检测 tvOS 是否越狱
- reporting-services - 在每个页面上重复整个 Tablix SSRS 报告
- python - Python - 在 DataFrame Apply 函数上添加 OR 运算符
- c++ - 为什么将 nullptr 作为 std::string 返回不是编译时错误?
- qt - 如何在 qml 中捕捉从虚拟键盘按下的 Key_Cancel?