Как перемещать вниз стрелку вверх?

Я использую значки от icomoon.I хочу поместить выпадающее меню с пользователем. Он работает, но проблема заключается в том, что кнопка со стрелкой идет вниз. Можно ли удерживать кнопку со стрелкой вверху (я имею в виду около голова значка) .Please увидеть скриншотКак перемещать вниз стрелку вверх?

enter image description here

Это мой Navbar код

<nav class="navbar navbar-custom navbar-static-top"> 
<div class="container"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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="#"></a> 
    </div> 
    <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"></a></li> 
     <li><a href="#">D</a></li> 
     <li><a href="#">E</a></li> 
    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" class="icon-store"></a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle icon-user2" data-toggle="dropdown" > <b class="caret"></b></a> 
     <ul class="dropdown-menu pull-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
    </div> 
</nav>

И это style.css значок изображения

@font-face { 
    font-family: 'icomoon'; 
    src:url('fonts/icomoon.eot?-8mvsu3'); 
    src:url('fonts/icomoon.eot?#iefix-8mvsu3') format('embedded-opentype'), 
     url('fonts/icomoon.woff?-8mvsu3') format('woff'), 
     url('fonts/icomoon.ttf?-8mvsu3') format('truetype'), 
     url('fonts/icomoon.svg?-8mvsu3#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 

    /* Better Font Rendering =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-search:before { 
    content: "\e600"; 
} 
.icon-users:before { 
    content: "\e601"; 
} 
.icon-lock:before { 
    content: "\e602"; 
} 
.icon-cogs:before { 
    content: "\e603"; 
} 
.icon-bubbles:before { 
    content: "\e604"; 
} 
.icon-pawn:before { 
    content: "\e605"; 
} 
.icon-box-add:before { 
    content: "\e606"; 
} 
.icon-signup:before { 
    content: "\e607"; 
} 
.icon-equalizer:before { 
    content: "\e608"; 
} 
.icon-bars:before { 
    content: "\e609"; 
} 
.icon-disk:before { 
    content: "\e60a"; 
} 
.icon-user:before { 
    content: "\e60b"; 
} 
.icon-user2:before { 
    content: "\e60c"; 
} 
.icon-stackoverflow:before { 
    content: "\e60e"; 
} 
.icon-store:before { 
    content: "\e60f"; 
} 
.icon-trash:before { 
    content: "\e60d"; 
}

источник

2014-02-11 rocking

'.caret {vertical-align: top; } 'это то, что вы ищете? –

вы можете использовать свойство vertical-align поддерживается во всех основных браузерах.

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

источник

2014-02-11 06:53:20

Я думаю, что это может иметь отношение к линии-высоте ... или плохой набор значков – VIDesignz

Не могли бы вы рассказать мне, как увеличить размер значка? Если я использую вертикальное выравнивание: вверх Похоже, стрелка идет вверх и значок приходит вниз. Я думаю, что если я скрою значок, тогда он будет выглядеть хорошо – rocking

вы можете использовать «font-size», чтобы изменить размер значка, и вам решать изменить размер или использовать вертикальное выравнивание, чтобы установить вертикальное выравнивание элемента –

Чтобы получить стрелку выровненной к вершине, использовать .caret { vertical-align: top; } или играть с другими значениями, чтобы увидеть, если вы можете получить эффект желания. Здесь у вас есть список возможных значений: W3C Wiki

попробовать с этим из них:

вертикальных Выровнять текст-топ
вертикальной Align: текст дна
вертикальных выравнивать: середина
вертикального выравнивания: сверху

Если вы хотите изменить размер .caret, вы ВГА e, чтобы изменить три объявленных размера границы. Потому что это не икона, это треугольник, с помощью CSS (CSS3 Shapes):

border-left: 4px solid transparent; 
border-right: 4px solid transparent; 
border-top: 4px solid;

Изменение 4px все, что вы хотите.

источник

2014-02-11 07:12:16

Как перемещать вниз стрелку вверх?

ответ

Смежные вопросы