Изменить размер значка мыши над - (FontAwesome + Bootstrap)

Question

Я хочу отобразить размер значка 2x на мыши над элементом.

Я использую FontAwesome с бутстрапом. У меня есть список, как это:

<ul> 
    <li><a href ="#"><i class="icon-inbox"></i> Inbox<a/></li> 
    <li><a href ="#"><i class="icon-print"></i> print<a/></li> 
    .... 
</ul> 

Я хочу, чтобы добавить «значок-2x» fontawesome CSS класс, на мыши над элементом, чтобы отобразить большую икону, и удалить этот класс в отпуск мыши.

Я хочу, чтобы это было похоже на примеры домашней страницы FontAwesome. как это:

Я пытался найти elemets с JQuery добавить класс CSS, но не смог этого сделать.

Может ли кто-нибудь мне помочь?

Благодаря

Answer 1

Почему вы не просто использовать CSS :hover?

li i[class^="icon-"] { font-size:12px; } 
li:hover i[class^="icon-"] { font-size:24px; } 

FontAwesome использует шрифт для иконок, поэтому удвоить размер значков вы просто удвоить размер шрифта. Разумеется, вам также нужно будет обслуживать заполнение, поля и все остальное, чтобы значок оставался относительно текста рядом с ним.

Если вы все еще хотите использовать JQuery, чтобы добавить новый класс:

$('li').hover(function() { 
    $('i[class^="icon-"]', this).addClass('icon-2x'); 
}, function() { 
    $('i[class^="icon-"]', this).removeClass('icon-2x'); 
}) 

Answer 2

Если вы хотели бы иметь анимированный переключатель вам нужно будет использовать JavaScript. Но вы могли бы добиться этого без него, делая это

<ul> 
    <li><a class="image" href ="#"></a> <p>Long story</p></li> 
</ul> 

И затем stylew его как этот

.image{ 
    float:left; 
    display:block; 
    background:url('http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png'); 
    width:50px; 
    height:50px; 
    background-size:50px 50px; 
} 
li p{ 
    line-height:50px; 
    vertical-align:center; 
} 
li:hover p{ 
    line-height:70px; 
} 
li:hover .image{ 
    width:70px; 
    height:70px; 
    background-size:70px 70px; 
} 

Вы можете увидеть скрипку здесь jsFiddle

Answer 3

Вы должны применять размер шрифта в : перед псевдоэлементом.

li:hover i:before { 
    font-size: 24px /*or whatever*/ 
} 

См: http://astronautweb.co/snippet/font-awesome/

Answer 4

Я хотел бы предложить использовать CSS шкалу (я использую его для ссылок на моей странице с FontAwesome):

a:hover i { transform: scale(2); } 

Он не будет перемещать элементы которые находятся рядом с значком (например, другим текстом), что вызывает изменение размера шрифта.

UPDATE

Смотрите пример того, как он работает с FontAwesome на сноске моей домашней странице: http://pnowy.github.io/about/