发表新帖
发表新帖

Font awesome is not showing icon

后端 未结
关注
30 1207
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-11-30 06:03

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

相关标签:
30条回答
  • 半阙折子戏
    2020-11-30 07:05

    When you open font-awesome.min.css you can see following path:

    'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

    It means that you have to create directory Fonts and then copy files fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.

    0 讨论(0)
  • 日久生厌
    2020-11-30 07:05

    I was following this tutorial to host Font Awesome Pro 5.13 myself.

    https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

    For some reason I could not get <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet"> to load webfonts that in turn resulted in only squares showing up. But when I used <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script> everything started working. Both links were added in HTML <head>.

    0 讨论(0)
  • 一向
    2020-11-30 07:06

    The code below is font-awesome 4.70.0. To go to font-awesome 5.11.2, click here.

    <!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>
    0 讨论(0)
  • 孤独总比滥情好
    2020-11-30 07:06 
    You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
    0 讨论(0)
  • 臣服心动
    2020-11-30 07:07

    You may have used a VCS (git or somesuch) to transfer icon files to the server. git says:

    warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

    You probably have to fix your fonts.

    0 讨论(0)
  • 北荒
    2020-11-30 07:08

    Check that the path to your CSS file is correct. Rather prefer absolute links, they are easier to understand since we know where we start from and search engines will also prefer them over relative links. And to reduce bandwidth rather use the link from font-awesome servers: 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

    Moreover if you use it, there will be no need of uploading extra fonts to your server and you will be sure that you point to the right CSS file, and you will also benefit from the latest updates instantly.

    0 讨论(0)
 看不清?
提交回复
热议问题