将Font-Awesome-5图标放置为Bootstrap-4卡背景 [英] Place Font-Awesome-5 Icon as Bootstrap-4 Card background

问题描述

我想使用Bootstrap-4将Font Awesome 5图标用作卡片背景图像！

I want to use a Font Awesome 5 icon as card background image using Bootstrap-4!

我尝试了从互联网上发现的所有内容，但没有任何效果.

I tried everything what I found from the internet but nothing worked.

我正在使用Angular2(v8)和Bootstrap 4.

I'm using Angular2 (v8) along with Bootstrap 4.

推荐答案

以下代码对我有用.我简化了我的操作，但是您仍然会得到一个超棒的字体图标作为背景，并且可以在其上方放置文本:

The following code worked for me. I've simplified what I use but you still get a font-awesome icon as background and you can put text on top of it:

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

查看工作的小提琴.

这篇关于将Font-Awesome-5图标放置为Bootstrap-4卡背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！