发表新帖
发表新帖

FontAwesome icons not showing. Why?

后端 未结
关注
25 1233
借酒劲吻你
借酒劲吻你 2020-11-29 17:15

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 18:10

    I got mine to work by editing the main font-awesome.css file. It has urls to the src (woff, eot, etc...) I had to change them to the absolute path eg: http://mywebsite.com/font-awesome.woff Then it worked!

    0 讨论(0)
  • 孤独总比滥情好
    2020-11-29 18:11

    I solved this problem by putting the Fonts directory at the same level as my CSS files.

    0 讨论(0)
  • 醉梦人生
    2020-11-29 18:13

    If you are using blogger hosting, use this url stylesheet css:

    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
    0 讨论(0)
  • 感情败类
    2020-11-29 18:13

    You need a font importer.| try

    <style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
    0 讨论(0)
  • 傲寒
    2020-11-29 18:14

    Notes

    This answer is created when the latest version of fontawesome is v5.* but yarn and npm version points to v4.* (21.06.2019). In other words, versions installed via package managers is behind latest release !

    If you installed font-awesome via package manager (yarn or npm) then, please be aware which version was installed. Alternatively, if you've already installed font-awesome long time ago then, check what version was installed.

    Installing font-awesome as new dependency:

    $ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

    Checking what version of font-awesome is already installed:

    $ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

    Problem

    After you installed font-awesome dependency, you incorporate one of these two source files font-awesome.css or font-awesome.min.css (founded in node_modules/font-awesome/css/) into header of your webpage e.g. 

    <head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

    Next, you visit https://fontawesome.com/. You select free icons and you search for sign-in icon (as an example). You copy the icon e.g. <i class="fas fa-sign-in-alt"></i>, you paste it into your html and, icon is not shown, or is display as square or rectangle !

    Solution

    In essence, versions installed via package managers is behind version that is shown on https://fontawesome.com/ website. As you can see we installed font-awesome v4.7.0 but, website shows documentation for font-awesome v5.*. Solution, visit the website that documents icons for v4.7.0 https://fontawesome.com/v4.7.0, copy appropriate icon e.g. <i class="fa fa-sign-in" aria-hidden="true"></i> and incorporate it into your html.

    0 讨论(0)
  • 别跟我提以往
    2020-11-29 18:14

    You can add this in .htaccess file in the directory of awesome font

    AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
    0 讨论(0)
 看不清?
提交回复
热议问题