Reputation:

Font Awesome 5 icons not showing up

I use codeigniter and Font Awesome 5 I have download the latest version of font awesome 5 how ever for some reason my icon is not showing up

Question How to get the icon to show up in font awesome 5 I am using xampp

It should show next to the sign in text there are no errors in dev console

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo $title;?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bs/css/bootstrap.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/fa/web-fonts-with-css/fontawesome-all.min.css');?>">
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.2.1.slim.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/popper.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/plugins/bs/js/bootstrap.js');?>"></script>
</head>
<body>

<div class="row mb-3">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <a href="<?php echo base_url('login');?>" class="btn btn-dark"><i class="fas fa-sign-in-alt"></i> Sign in</a>
    </div>
</div>

</body>
</html>

Upvotes: 5

Answers (7)

Hossein Haji Mali

Reputation: 339

for me i did the following steps:

import these files in your .scss file (change the path related to your project scss folder):

@import "../_fontawesome-free-5.15.4-web/scss/fontawesome";
@import "../_fontawesome-free-5.15.4-web/scss/regular";
@import "../_fontawesome-free-5.15.4-web/scss/brands";
@import "../_fontawesome-free-5.15.4-web/scss/solid";
@import "../_fontawesome-free-5.15.4-web/scss/v4-shims"

change "/fontawesome/scss/_variables.scss" file(change path related to compiled css file and webfonts folder):

$fa-font-path: "../fontawesome/webfonts" !default;

Upvotes: 0

Abhishek

Reputation: 31

I understand that this thread is old. However, posting this in case it helps someone.

I too ran into the same issue in Font Awesome 5 with fas fa-virus. As @zipzit mentioned, while using a CDN, the integrity hash does matter. The best option, in this case, is to signup with Font Awesome, create a kit and add that to the <head> tag of the html file. This way, all the free icons ("fa","fab","fas","far","fal") seem to work.

Example:

<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>

Upvotes: 2

zipzit

Reputation: 3997

For anybody using Font Awesome via CDN and Javascript download (both solid.js and fontawesome.js) the integrity hash matters. In my case I got lazy, and updated the script link to a newer version, without updating the hash. I could see the two downloaded files in Chrome devtools, but they were non functional.. The integrity hash has to absolutely match to its original source...

    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

Oops.

Upvotes: 0

Joshua Coda

Reputation: 91

Codeigniter 3/Bootstrap 4/Font Awesome 5

PHP FILE

header.php file with CSS Implementing Plugins. Change <link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css"> to the following:

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/vendor/font-awesome/css/fontawesome-all.min.css');?>">

CODEIGNITER 3

application/config/config.php. Change $config['base_url'] = ''; to the following:

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://'; $newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']); $config['base_url'] = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

Upvotes: 1

Muhammad Lutfi Farid

Reputation: 11

in my case, i get square icon on fontawesome on localhost because i am not set my base_url value in config\config.php

$config['base_url']    = ''

it's getting work when i change my base_url to

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://';
$newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

Upvotes: 1

mikeym

Reputation: 6311

The instructions on the font awesome site for getting 5.0.10 running are a little confusing when it comes to what files should go where. I ran into this exact problem and solved it with these steps:

Create the following directory

/static/styles/fontawesome/css

Copy and paste all fontawesome css files into the above directory

Copy the entire webfonts directory and paste in into /static/styles/fontawesome (so that it is at same level as the css directory)

Add the following to your html header <link rel="stylesheet" href="static/styles/fontawesome/css/fontawesome-all.css">

Add icon tags to your code using the corresponding version documentation (5.0.10)
<i class="fas fa-tachometer-alt"></i>

Note: Be sure to use only icons from the free set if you do not have a pro licence. https://fontawesome.com/icons?d=gallery&m=free

This might not work for everyone but hope it helps someone out with this frustrating problem!

Upvotes: 13

Abhishek Ekaanth

Reputation: 2567

you are using fas fa-sign-in-alt which is pro version of Font Awesome 5 you need to get the licence then only you would be able to use them. you can get your icon from here

Reference https://fontawesome.com/pro

Upvotes: 3

Font Awesome 5 icons not showing up

Answers (7)

Related Questions