Использование шрифта - удивительный сложный значок в ссылке

Question

Я пытаюсь использовать иконку внутри ссылки. Когда я использую только один значок, все работает нормально. Но при попытке использовать значок со штабелями он не отображается в ссылке, как в одном значке.

Первый метод я использую:

<a href="#" class="tweet"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis</a> 

посещение: Broken Stacked Icon

Это дает мне что-то, где две иконы являются как по левому краю (от центра) и значки отображаются поверх текст.

Я думал, что включение этого диапазона с классом знакового стека вместо одного <i> будет способом сделать это, но это не так. Это прекрасно работает:

<a href="#" class="tweet"><i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis</a> 

посещение: Inline icons

Я не уверен, куда поместить контейнер <span>, или если там должно быть больше стилей добавлены к нему. Я пробовал разные комбинации. Настройка отображения a: блок не помогает (других стилей, применяемых к ссылке, нет).

Если в тексте нет текста, результат будет таким же. Установка класса контейнера .icon-stack в display:block действительно помогает, но это не идеально, так как значок базы намного больше, чем значок сверху.

Это что-то, что возможно? Или я подталкиваю пределы того, как использовать значки штабелей?

Answer 1

Это фиксируется в 3.2. 1-wip ветвь. Или вы можете дождаться выхода завтра. :)

Answer 2

Здесь вы идете ..

<a href="http://google.com"> 
    <span class="icon-stack"> 
     <i class="icon-check-empty icon-stack-base"></i> 
     <i class="icon-twitter"></i> 
    </span> 
    link text 
    <br/> 
</a> 

Span набор встраивать-блок, чтобы гарантировать, что значок остается на месте

body { 
    color:#00000; 
} 
a { 
    text-decoration:none; 
    color:inherit; 
    display:block; 
} 
span.icon-stack { 
    display:inline-block; 
} 

Demo: http://jsfiddle.net/aB4nU/1/