Skip to content
Advertisement

Flaticons not showing up on WordPress

I have almost finished converting an HTML website over to WordPress but I couldn’t something to work. I am just creating a new theme to switch the website over. Here is the link to see what it should look like, There are three icons that are not showing up, right under the about section. And here is the link to my site, zekemaurer.com.

Here is the code.

<div class="col-md-4">
                    <div class="single-service txt2_is_show">
                        <div class="icon"><span class="flaticon-web-design"></span></div>
                        <div class="srvc-content">
                            <h4>Realtor</h4>
                            <p>I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe that would be the best</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-service txt2_is_show">
                        <div class="icon"><span class="flaticon-settings"></span></div>
                        <div class="srvc-content">
                            <h4>Investor</h4>
                            <p>I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe that would be the best</p>
                        </div>
                    </div>
                </div>

How do I get the icons to show up on my wordpress website?

Advertisement

Answer

You’re missing assets/css/flaticon.css from the example website.

Specifically, this CSS which you can probably dump onto the end of style.css

/*

    Flaticon icon font: Flaticon
    Creation date: 23/10/2017 08:34
    */

@font-face {
  font-family: "Flaticon";
  src: url("../fonts/Flaticon.eot");
  src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Flaticon.woff") format("woff"),
       url("../fonts/Flaticon.ttf") format("truetype"),
       url("../fonts/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
    margin-left: 0px;
}

.flaticon-play-button:before { content: "f100"; }
.flaticon-adobe:before { content: "f101"; }
.flaticon-settings:before { content: "f102"; }
.flaticon-web-design:before { content: "f103"; }
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement