Font Awesome with bootstrap 3 not working

StackOverflow https://stackoverflow.com//questions/20037106

Question

This is my header where i've added font awesome as stated at the homepage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Custom Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.css" rel="stylesheet"
</head>

And try testing font awesome with adding 

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3
</a>

But the result is: none of the font awesome specific typography or icons. It seems like font awesome will not surpress the bootstrap code. Anyone can help?

Was it helpful?

Solution

I don't have any problems with the following example, which is basically a combination of the two snippets you posted.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Custom Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

  <!-- Bootstrap core CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>    

<body>
  <a class="btn btn-lg btn-success" href="#">
    <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3
  </a>
</body>
</html>

As Michal remarked, your version had an open link tag for the Bootstrap style-sheet. The only change I did, was loading Bootstrap from a CDN as well (since I didn't have a local copy handy).

However, the example even worked when the link tag wasn't closed, but that might depend on the browser used. Did you get any errors in your console (e.g. missing components?)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top