CODEWITHSUNDEEP
phpjquerycsscodeigniter
Sibison
Sibison

Reputation: 51

How to include font-awesome in codeigniter

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

Upvotes: 5

Views: 16448

Answers (7)

Blake Paige
Blake Paige

Reputation: 21

Firstly I would recommend that you inspect your browser if there are any errors by pressing F12 on Chrome.

Snapshot

Make sure that the URL corresponds to the place you have put your font awesome folder: e.g. Project
--Application
--Assets
----CSS
------font awesome
--------CSS
----------fontawesome.css
--system

If the path is correct then go to font awesome website to check the code of the icon you want, every icon you choose will have an example of how to use it.

https://fontawesome.com/icons?d=gallery

Hope that helps

Upvotes: 0

Duong Ngo
Duong Ngo

Reputation: 231

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.

Upvotes: 3

kevin
kevin

Reputation: 1

Try this..

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

and set your base_url in your config file like this

$config['base_url'] = 'http://domain.com/websiteroot/';

Upvotes: 0

FluxCoder
FluxCoder

Reputation: 1276

There is not a difference, you are still able to use the following code:

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

You can also include it via the CSS file by adding: 

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

Upvotes: 0

n4mi
n4mi

Reputation: 21

If you dont want the cdn then you can do this.

open the css file (in fontawesome/css) and change the url source of all font files.

this block

@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;
}

to

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

Upvotes: 0

Manoj K
Manoj K

Reputation: 477

Hosting on your server

Click here to Download Font-Awesome

Extract the downloaded ZIP into your Codeigniter Directory. I assumed you have extracted FontAwesome in plugin/font-awesome/

Code to include the file in view:

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

Using CDN Hosted

Simply Add this code into your view

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

Upvotes: 0

Sahil Manchal
Sahil Manchal

Reputation: 468

fontawesome is not only single css file it include more file internally so if you want to do it in offline you have to put all file related to font awesome like fonts or use online link is better option

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

Upvotes: 0

Related Questions