Question

我有两个问题 -

除了glyphicons之外，我如何在HTML / CSS中添加小图标？没有bootstrap是不可能的？
为什么我的主页glyphicon没有像其他元素那样在中间垂直对齐？

提前多多感谢！

这是我的HTML代码 -

Ext.define('Ext.chart.theme.myChartTheme', {
    extend: 'Ext.chart.theme.Base',
    singleton: true,
    alias: [
        'chart.theme.mycharttheme'
    ],
    config: {
        colors : [ '#5DD2E0','#5ABCCF','#58A7BC','#5492A9',
                  '#4F7E95','#496A81','#42576D','#394659' ]    
    }
});

这是CSS -

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

Answer 1

.course_strip的行高为44px。为图标设置相同。

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

Answer 2

回答你的两个问题：

除了Glyphicons之外，您还可以使用其他基于字体的图标库，例如FontAwesome，或者您可以使用图像并将它们嵌入到标记中。 Font Awesome 不需要整个框架，例如bootstrap（实际上，neither does Glyphicons）
图标的高度问题是由于字形上的线条高度与其他元素不同。使用浏览器的Inspector，您将看到为条带中的所有内容指定了44px的行高，但是glyphicon的行高为1em。

添加一个样式来处理条带中的glyphicon，你会发现它有效。（见下面的修订代码）。

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

Answer 3

您可以添加此CSS。

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

为什么glyphicon没有与同一条带中的其他元素对齐？

3 个答案: