How to include font-awesome in codeigniter

Question

i have include font-awesome but icons are show square box..

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

please help me

Answer 1

You can't use base_url() or site_url() for font-awesome.css only because of:

@font-face {
font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Solution 1. If you don't want to download font-awesome, you can use:

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

Of course this always works. Disanvantage of solution 1 is the dependence on the internet connection.

Solution 2. First of all, you must download all files of fontawesome(svg, woff, eot,...) and put them all in a folder - for example, let the name of the folder be fontawesome.

Then, you must remove the following code from the file font-awesome.css

@font-face {
    font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
      src: url('../font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }

After that, you copy them into the <style></style> of the .html or .php file, which you want to implement font-awesome. But you must change the src as follow:

@font-face {
    font-family: 'FontAwesome';
      src: url('<?=site_url('fontawesome/fontawesome-webfont.eot?v=4.6.3'); ?>');
      src: url('<?=site_url('fontawesome/fontawesome-webfont.eot?#iefix&v=4.6.3') ; ?>') format('embedded-opentype'), url('<?=site_url('fontawesome/fontawesome-webfont.woff2?v=4.6.3');?>') format('woff2'), url('<?=site_url('fontawesome-webfont.woff?v=4.6.3'); ?>') format('woff'), url('<?=site_url('fontawesome/fontawesome-webfont.ttf?v=4.6.3'); ?>') format('truetype'), url('<?=site_url('fontawesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular'); ?>') format('svg');
      font-weight: normal;
      font-style: normal;
    }

and remember to add these in your .html, .php too:

<link rel="stylesheet" type="text/css" href="<?=site_url("fontawesome/font-awesome.css"); ?>" />

---

And including glyphicon of bootstrap is totally similar.