Reputation: 1219

Font Awesome trouble with fa-bed

I am trying to use Font Awesome icons, the problem is that the size of fa-bed is 0X0 though the other icons are displayed properly.

Here is my html:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
    <div class="col-sm-2 col-xs-3 col_pad col_pad_xs">
        <i class="fa fa-plane" aria-hidden="true"></i><span>Flight</span>
    </div>
    <div class="col-sm-2 col-xs-3 col_pad col_pad_xs">
        <i class="fa fa-bed" aria-hidden="true"></i><span>Hotel</span>           
    </div>
    <div class="col-sm-2 col-xs-3 col_pad col_pad_xs">
        <i class="fa fa-plane" aria-hidden="true"></i>
        <span>+</span>
        <i class="fa fa-bed" aria-hidden="true"></i>
        <span style="margin-left: -5px;">Flight + Hotel
        </span>
    </div>
    <div class="col-sm-2 col-xs-3 col_pad col_pad_xs">
        <i class="fa fa-sun-o" aria-hidden="true"></i><span>Holidays</span>
    </div>
</div>
</body>
</html>

Here is a screenshot of what I get: