font awesome, devicon, simple fonts not loading

Question

While designing I came across some problems with all of the fonts I have.
First, none of my fonts are loading. I have cdn's in the head tag of all of the fonts I need and they show up as colorful squares.
Second, I cant change any fonts for the text in the html, it just reads: font-family: 'Abril Fatface';, I added the font family of anything else in my scss *{} tag, but it did nothing, tried to add the font straight in the html tags but that also did nothing. I amusing newest Bootstrap-4.0.0-alpha.6

Here's my head tag

<head>
    <title>Q-bit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Bootstrap-4.0.0-alpha.6-->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <!--Font awesome-->
    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
    <!--devicon icons-->
    <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
    <!--Baguetteox for the gallery-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
    <!--jquery-->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="./styles/jquery.ba-throttle-debounce.js"></script>
    <!--floating icon slider-->
    <script src="./styles/floatingcarousel.min.js"></script>
    <!--My Styles-->
     <link rel="stylesheet" href="./styles/styles.css">
    <!--LoadData-->
    <script src="./styles/loadData.js"></script>



</head>

And here's the call to font-awesome style:

<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation" id="toogleIcon">
                   <span class="fas fa-angle-down my-toggler" id="faToggler"></span></button>

the devicons are listed in the floating carousel, but they all are defined in this style:

 <li><span><i class="devicon devicon-angularjs-plain-wordmark colored"></i></span></li>

spell mistake "fas fa-angle-down my-toggler " to "fa fa-angle-down my-toggler" — Lalji Tadhani, Jan 22 '18 at 08:52
tried this and the icons are loading... Something might be wrong with your html file...or your user defined css — Ayo K, Jan 22 '18 at 08:53
@LaljiTadhani according to https://fontawesome.com/how-to-use/svg-with-js I can use fas, far, lab and fal for the font-awesome 5, but I tried using fa and it did not work — Aina, Jan 22 '18 at 08:56
Ok, so the problem probably is in my defined style file, tnx for the effort — Aina, Jan 22 '18 at 09:29

score 0 · Answer 1 · answered Jan 22 '18 at 12:20

0

In my scss file, I had:

*{
    background:#ffffff;
}

and I'm not sure why, but it blocked all fonts.

answered Jan 22 '18 at 12:20

Aina

85
1
9

font awesome, devicon, simple fonts not loading

1 Answers1