为什么字形不与同一条带中的其余元素对齐？

Question

我有2个问题-

除了glyphicons，如何在HTML/CSS中添加小图标？没有bootstrap就不行吗？
为什么我的主页字形图标不像其他元素那样在中间垂直对齐？

提前致谢！

这是我的 HTML 代码-

<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>

这是 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;
}

Answer 1

.course_strip has line height of 44px. Set the same for icon.

.course_strip .course_strip_left p .glyphicon {line-height: 44px;}

Answer 2

您可以添加这个 CSS。

.course_strip >.course_strip_left > p > .glyphicon{
    float: right;
    padding: 10 10px;
}

Answer 3

您的两个问题的答案：

除了Glyphicons，您还可以使用其他基于字体的图标库，例如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)
您的图标的高度问题是由于您的字形图标的行高与其他元素不同。使用浏览器的检查器，您会看到为条带中的所有内容分配了 44px 的行高，但 glyphicon 的行高为 1em。

添加样式来解决条带中的字形图标，您会看到它起作用了。（见下面修改后的代码）。

* {
  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>

为什么字形不与同一条带中的其余元素对齐？

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

html

css

glyphicons