FontAwesome icons not showing. Why?

后端未结

关注

 25  1232

借酒劲吻你

Recently I\'ve been developing this website and I\'m trying to put a font awesome icons in it, so it\'s scalable.

The thing is they are not showing up.

Look

相关标签:

25条回答

不思量自难忘°

2020-11-29 17:55
Just adding some more info to the above answers in regards with update on fontawesome,

If you use font awesome 5,

a. just copy-to-paste the below HTML,
```
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
```
Note: Better to include all your scripts within the <body> {YOUR_SCRIPT_HERE}</body> and just before (YOUR_CLOSING_BODY)

b. And for example,
```
<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

温柔的废话

2020-11-29 17:55

adding this worked for me:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

take a look

so full example is:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>

0 讨论(0)

执念已碎

2020-11-29 17:57

I have tested and it's working.

Instead of this

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Use it with HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

0 讨论(0)

忘掉有多难

2020-11-29 17:58

I was able to get Font Awesome to work by using the all.min.css file.

0 讨论(0)
发布评论:

提交评论
- 加载中...
后悔当初

2020-11-29 18:00

If you define custom CSS you must set font-weight: 900; for some newer Font Awesome library (from version 5). Not setting this font-weight it may show squares.

0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-11-29 18:00

I use:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

and style after:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

0 讨论(0)