Why the glyphicon is not aligning with the rest of the elements in the same strip?

I have 2 questions-

Apart from glyphicons, how can I add small icons in HTML/CSS? Is it not possible without bootstrap?
Why my home glyphicon not aligning vertically in the middle like the rest of the elements?

Thanks a lot in advance!

Here's my HTML code-

<html>
    <head>
        <title>Tutorial</title>
        <link rel="stylesheet" href="w3.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="course_strip">
            <div class="course_strip_left">
                <p class="glyphicon glyphicon-home"></p>
                <p>HTML</p>
                <p>CSS</p>
                <p>JAVASCRIPT</p>
                <p>SQL</p>
                <p>PHP</p>
                <p>BOOTSTRAP</p>
                <p>JQUERY</p>
                <p>ANGULAR</p>
                <p>MORE</p>
            <div class="course_strip_right">
                <p>REFERENCES</p>
                <p>EXAMPLES</p>
            </div>
        </div>
    </body>
</html>

Here's the CSS-

*{
     margin:0; 
     padding: 0;
     box-sizing: border-box;
     text-decoration: none;
}

.course_strip{
    background-color: rgba(0,0,0,0.65);
    height: 44px;
    color:#F1F1F1;
    line-height: 44px;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Segoe UI';
}
.course_strip p{
    padding: 0 10px;
}
.course_strip p:hover{
    background-color: #000;
}
.course_strip p:active{
    background-color: green;
}
.course_strip_left p{
    float: left;
}
.course_strip_right p{
    float: right;
}

Solution

Answers to both your questions:

Besides Glyphicons, You can use other font-based icon libraries as well, such as FontAwesome, or you can use images and embed them into your markup. Font Awesome does not require a whole framework such as bootstrap (and actually, neither does Glyphicons)
The height issue with your icon is due to the line-height on your glyphicon is not the same as the rest of the elements. Use your browser's Inspector and you will see that you assign a line-height of 44px to everything in the strip, but glyphicon has a line-height of 1em.

Add a style to address the glyphicon in the strip, and you'll see it work. (See below revised code).

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.course_strip {
  background-color: rgba(0, 0, 0, 0.65);
  height: 44px;
  color: #F1F1F1;
  line-height: 44px;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 1px;
  font-family: 'Segoe UI';
}

.course_strip p {
  padding: 0 10px;
}

.course_strip p:hover {
  background-color: #000;
}

.course_strip p:active {
  background-color: green;
}

.course_strip_left p {
  float: left;
}

.course_strip_right p {
  float: right;
}

/* Adjust line-height to your desired position */
.course_strip .glyphicon {
  line-height: 34px;
}

<html>

<head>
  <title>Tutorial</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="course_strip">
    <div class="course_strip_left">
      <p class="glyphicon glyphicon-home"></p>
      <p>HTML</p>
      <p>CSS</p>
      <p>JAVASCRIPT</p>
      <p>SQL</p>
      <p>PHP</p>
      <p>BOOTSTRAP</p>
      <p>JQUERY</p>
      <p>ANGULAR</p>
      <p>MORE</p>
      <div class="course_strip_right">
        <p>REFERENCES</p>
        <p>EXAMPLES</p>
      </div>
    </div>
</body>

</html>