Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code:

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

I would like to know how to make the icon display instead of the bordered square box.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
349 views
Welcome To Ask or Share your Answers For Others

1 Answer

In my case i made the following mistake in my css code.

*{
    font-family: 'Open Sans', sans-serif !important;
}

This will override all font family rules for the entire page. My solution was to move the code to body like so.

body{
    font-family: 'Open Sans', sans-serif;
}

NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...