Question

如何使图标更大并以导航栏为中心？

没有与导航栏关联的CSS规则，那么为什么图标显示与其他元素相同？我尝试过几件事，但似乎没什么用。

在下图中注意右侧的图标，它们与其他元素不对齐

代码：

<header>
  <nav class = "navbar navbar-default navbar-fixed-top">
    <div class = "container">
      <div class = "navbar-header">
        <a class = "navbar-brand" href = "#">
          BRAND
        </a>
      </div>
      <ul class = "nav navbar-nav navbar-right">
        <li class = "text"><a href="#">ABCD</a></li>
        <li class = "text"><a href="#">EFGH</a></li>
        <li class = "text"><a href="#">IJKL</a></li>
        <li class = "text"><a href="#">MNOP</a></li>
        <li><i class = "fa fa-facebook"></i><li/>
        <li><i class = "fa fa-twitter"> </i><li/>
        <li><i class = "fa fa-instagram"> </i><li/>
      </ul>
    </div>
  </nav>
</header>

Answer 1

Set

您需要应用与锚标签相同的填充/线高。

https://jsfiddle.net/ashzzx2j/

注意：需要使用预览扩展窗口。

Answer 2

您可以在类标记中尝试fa-2x，完全像：

class =＆＃34; fa fa-facebook fa-2x＆＃34;

class =＆＃34; fa fa-twitter fa-2x＆＃34;

class =＆＃34; fa fa-instagram fa-2x＆＃34;

通过更改＆＃34; x＆＃34;图标的大小会有所不同来自＆＃34; x＆＃34;直到＆＃34; 5x＆＃34;

Answer 3

使用锚标记包裹您的图标，以便他们像菜单项一样使用锚标记的样式。

In [421]: np.sort(xnew)[idx]
Out[421]: array([  0,   2,   6,  -2,  10,  -4,   8,  -8, -10,  -6,   4])

此外，如果您想添加其他样式，请使用

<ul class = "nav navbar-nav navbar-right">
        <li class = "text"><a href="#">ABCD</a></li>
        <li class = "text"><a href="#">EFGH</a></li>
        <li class = "text"><a href="#">IJKL</a></li>
        <li class = "text"><a href="#">MNOP</a></li>
        <li><a href="#"><i class = "fa fa-facebook"></i></a><li/>
        <li><a href="#"><i class = "fa fa-twitter"> </i></a><li/>
        <li><a href="#"><i class = "fa fa-instagram"> </i></a><li/>
      </ul>

Answer 4

为什么不将图标包装在锚标记

中

<li><a href=""><i class = "fa fa-facebook"></i></a><li/>
<li><a href=""><i class = "fa fa-twitter"> </i></a><li/>
<li><a href=""><i class = "fa fa-instagram"> </i></a><li/>

并尝试一下。

Answer 5

Try any of these classes => fa-lg,fa-2x,fa-3x,fa-4x,fa-5x .

Example :

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Answer 6

  <ul class = "nav navbar-nav navbar-right">
    <li class = "text"><a href="#">ABCD</a></li>
    <li class = "text"><a href="#">EFGH</a></li>
    <li class = "text"><a href="#">IJKL</a></li>
    <li class = "text"><a href="#">MNOP</a></li>
    <li><a href="#"><i class = "fa fa-facebook"></i></a><li/>
    <li><a href="#"><i class = "fa fa-twitter"> </i></a><li/>
    <li><a href="#"><i class = "fa fa-instagram"></i></a><li/>
  </ul>

如果要增加尺寸，请使用

fa fa-instagram fa-2x

或

<i class = "fa fa-instagram" style="font-size:20px;"</i>

Answer 7

更改字体真棒图标的字体大小

.fa{
  font-size: 2em
}

Bootstrap导航栏上的图标显得太小

7 个答案: