The problem
In my new project, I'm integrating Font Awesome by the use of the kit code. It is a free licence with the latest version enabled covering both solid and brand icons.
While brand icons appear without any problems, I'm not able to make solid icons work, i.e. they are shown as boxes.
My approach so far
- Checked the spelling of font-family: no mistakes
- Checked unicodes: anything okay
- Tried other solid icons: same problem
- Tried i-class approach: strangely works for solid icons, too.
So, what am I doing wrong? This problem is driving me nuts; and I have the dim feeling that the solution is just super easy.
Cheers
The Code
/* Font Awesome */
#benefits .wd-brand-icons::before {
font-family: "Font Awesome 5 Brands";
font-size: 48px;
margin-left: -75px;
margin-top: -5px;
position: absolute;
}
#benefits .wd-solid-icons::before {
font-family: "Font Awesome 5 Free";
font-size: 48px;
margin-left: -75px;
margin-top: -5px;
position: absolute;
}
#benefits p.wd-icons {
margin-left: 75px;
}
.wd-html5::before {
content: "\f13b"; /* Brand icon works */
}
.wd-security::before {
content: "\f3ed"; /* Solid icon does not */
}
.wd-plan::before {
content: "\f542";
}
.wd-consulting::before {
content: "\f4c4";
}
<section id="benefits">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="section-heading">
<p>Lorem Ipsum</p>
<h2>Lorem ipsum dolor sit amet, consectetur</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-6">
<p class="wd-icons wd-brand-icons wd-html5">
<span class="d-block font-weight-bold">Headline</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos praesentium eveniet pariatur doloremque nemo soluta.</p>
</div>
<div class="col-sm-6">
<p class="wd-icons wd-solid-icons wd-security">
<span class="d-block font-weight-bold">Headline</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quam error reprehenderit, veniam omnis, cum sequi fugit unde placeat nobis.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p class="wd-icons wd-solid-icons wd-consulting">
<span class="d-block font-weight-bold">Headline</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quasi minima non, quia laudantium dignissimos, molestias dolore!</p>
</div>
<div class="col-sm-6">
<p class="wd-icons wd-solid-icons wd-plan">
<span class="d-block font-weight-bold">Headline</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, vel enim quos. Totam laudantium accusantium.</p> <!-- TODO: Solid Icons werden nicht angezeigt -->
</div>
</div>
</div>
</div>
</div>
</section>