Bootstrap Glyphicons - Проблемы с позиционированием

Question

Я пытаюсь переместить положение глификона в Bootstrap 3 из-под имени пользователя, рядом с ним, но я не могу заставить его двигаться. Вот HTML код:

<div class="well sidebarbox"> 

<div class="avatar large pull-left"> 
    <a href="<?php echo $this->baseUrl()?>/<?php echo $this->GetCurrentUserData('name')?>"> 
     <img src="<?php echo $this->GetStorageUrl('avatar') . $this->GetCurrentUserData('avatar')?>"> 
    </a> 
</div> 

<strong><?php echo $this->GetCurrentUserData('screen_name')?></strong> 
<?php $current_user_meta = Zend_Registry::get('current_user_meta');?> 
<?php if (isset($current_user_meta['badges'])):?> 
    <div class="network-badges horizontal"> 
     <?php echo $this->partial('/partial/badges.phtml', array('badges' => $current_user_meta['badges']));?> 
    </div> 
    <?php endif;?> 

<div class="clearfix"></div> 

<hr /> 

<ul class="nav nav-pills nav-stacked"> 
    <li> 
     <a href="<?php echo $this->baseUrl()?>/editprofile/edit"><?php echo $this->translate('Edit Profile');?></a> 
    </li> 
    <li> 
     <a href="<?php echo $this->baseUrl()?>/search/posts"><?php echo $this->translate('All Posts');?></a> 
    </li>  
</ul> 

</div> 

А вот мой CSS код:

.network-badges.vertical{ 
padding-left: 1px; 
} 

.network-badges.horizontal{ 
white-space: nowrap; 
} 

.network-badges.vertical{ 
max-width: 64px; 
} 

.network-badges .network-badge{ 
margin: 3px 3px 0 3px; 
cursor: pointer; 
} 

В настоящее время выход заключается в следующем:

Richard Evans 
[glyphicon] 

И я хочу, чтобы это было

Richard Evans [glyphicon] 

Любой совет будет оценен по достоинству.

Благодаря

Answer 1

Поместите имя пользователя в DIV и всплывают все дивы влево.

Answer 2

Это немного трудно сказать, что вы делаете здесь, и я не могу видеть, какую версию бутстрапе вы используете, давайте предположим 3.

документация здесь http://getbootstrap.com/components/

вообще если вы хочу использовать глиф вы делаете вещи, как этот

<span class="glyphicon glyphicon-star"></span> Username 

Я обнаружил, что пространство между глифом и текстом важно поддерживать

для гиперссылкой это может выглядеть следующим образом

<a href"...">Username <span class="glyphicon glyphicon-star"></span></a> 

Это действительно так просто.

Лучший совет, который я могу вам дать, - это, возможно, сделать свой интерфейс в HTML, прежде чем вводить динамический текст. JsFiddle - хорошее место для практики.

Answer 3

glyphicon класс в bootstrap.css оставлен по умолчанию, потому что все классы 'glyphicon-*' имеют класс psedo, который помещает значок перед компонентом.
Например:

 
.glyphicon-asterisk:before { 
    content: "\2a"; 
} 
.glyphicon-plus:before { 
    content: "\2b"; 
} 
.glyphicon-euro:before { 
    content: "\20ac"; 
} 

и так далее.

Если вы действительно хотите поместить иконку справа, вы должны «переопределить» класс, очистка before псевды и создать новую для after, как это:

 
.glyphicon-asterisk:before { 
    content: ""; 
} 

.glyphicon-asterisk:after { 
    content: "\2a"; 
}