Html Question posted in
Some basic documentation can be found here.

Html – Fontawesome 6 hosted locally not showing icons

I am trying to host font awesome locally, though it doesn’t show its icons and I have no idea why.

Here is what I did:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset = UTF-8">
    <title>Title</title>
    <link rel="icon" type="image/x-icon" href="resources/favicon.ico" />
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="fontawsome/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawsome/css/brands.min.css">
    <link rel="stylesheet" href="fontawsome/css/solid.min.css">
</head>

<body>
    <i class="fa-solid fa-user"></i>
    ...
</body>

And here are the files I added to my project:

Font awesome files I added to my project

I tried looking on https://docs.fontawesome.com/web/setup/host-yourself/webfonts but it doesn’t say to do anything different. I expected the fontawesome icon would be shown

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Oof, it was a typo in the file name. Sorry guys, thanks for the attention. I wrote font-awesome.min.css instead of fontawesome.min.css


  2. 0

    Alright so, here are a few solutions you could try:

    1. Clear Cache: Clear your browser’s cache or perform a hard refresh (Ctrl + F5 or Cmd + Shift + R on macOS) to remove old cached files.

    2. Font Awesome Version: Make sure the classes you’re using are compatible with the current Font Awesome version. For example, Font Awesome 6+ includes the class fa-solid. If you’re using Font Awesome 5 or earlier, use fas rather than fa-solid.

    3. Check Browser Developer Tools: Press F12 to open the browser’s developer tools, then check the "Console" and "Network" tabs for errors or failed resource loading (e.g. 404). You may notice missing files or incorrect paths that could be preventing the rendering.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search