Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
CamperBot
@camperbot
:star2: 1133 | @sorinr |http://www.freecodecamp.com/sorinr
123xylem sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
@123xylem and load first bootstrap and after fa
Chris Cullen
@123xylem
@sorinr i have it loaded up now but they still wont show
Sorin Ruse
@sorinr
are u on codepen?
or u develop locally on your pc? @123xylem
Chris Cullen
@123xylem
@sorinr pc
@sorinr when i inspect the fontawesome it shows its there but doesnt really say anything
top 3 things under my font awesome inspection
element.style {
}
  • {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    user agent stylesheet
    i, cite, em, var, address, dfn {
    font-style: italic;
    }
Sorin Ruse
@sorinr
@123xylem in order to see the fa working is to put an <i class="fa fa-icon name u want"></i> on the page
Chris Cullen
@123xylem
@sorinr yeai have that
<h1> <i class="fa fa-camera-retro" aria-hidden="true"></i> Image Gallery</h1>
it shows on the page when i inspect
but doesnt do anyting
Sorin Ruse
@sorinr
@123xylem don't u see the fa-camera-retro icon?
Chris Cullen
@123xylem
@sorinr no
the code is there
when i inspect it shows aswell
but the code does nothing
Sorin Ruse
@sorinr
@123xylem go to devtools.->sources and look for the libs if they have been loaded
Chris Cullen
@123xylem
reading them im not sure
unsplash is there
cant see fontawesome
Sorin Ruse
@sorinr
@123xylem its hard to help you without seeing whats happening
Chris Cullen
@123xylem
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Gallery</title>
</head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >


<style>
.fa fa-camera-retro{
    width:30px;
height:20px;}
    .standard{width: 100%;
        height:200px;}
        body{padding: 70px;}
        .jumbotron{
            background-color:#ccc;
            color:#2c3e50;
        }
        .navbar-inverse{
                        background:#2c3e50;

        }    
            .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
                        background:#2c3e50;
}
}
                .navbar-inverse .navbar-brand {
    color: white;
}
.navbar-inverse .navbar-nav>li>a {
    color: white;
}


</style>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-picture"></span> Images</a> 

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Contact</a></li>




      </ul> 
      <ul class="nav navbar-nav  navbar-right active">   <li ><a href="#">Login </a></li>
</ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
<div class="jumbotron">

<h1> <i class="fa fa-camera-retro" aria-hidden="true"></i>
  Image Gallery</h1>

 </div>


 <script   src="https://code.jquery.com/jquery-3.1.1.min.js" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr
That is my site
rap/3.3.7/js/bootstrap.min.js"</script>
</body>
</html>
@sorinr
With that at the end
alpox
@alpox
Your link and style tags are outside of head.
You close it before
@123xylem
Move the </head> down to right before <body>
Chris Cullen
@123xylem
@alpox thanks but no worky
CamperBot
@camperbot
123xylem sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 746 | @alpox |http://www.freecodecamp.com/alpox
Sorin Ruse
@sorinr
@123xylem this is wrong <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
alpox
@alpox
Also your link to fontawesome is wrong: <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Try <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Sorin Ruse
@sorinr
@123xylem and load it after bootstrap
Chris Cullen
@123xylem
@sorinr @alpox YES
@sorinr @alpox thanks
CamperBot
@camperbot
123xylem sends brownie points to @sorinr and @alpox :sparkles: :thumbsup: :sparkles:
:warning: 123xylem already gave alpox points
:warning: 123xylem already gave sorinr points
Chris Cullen
@123xylem
I used the cdn that fontawesome had on their site i htink

Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Check out the examples to start using Font Awesome!
THATS WHAT I COPIED

not sure why it didnt work
or why there href is like that
alpox
@alpox
@123xylem Well look at the path. They just wanted to tell you that you have to link to your own copy of the css on your disk