jquery - Change icon size on mouse over - (FontAwesome + Bootstrap) -



jquery - Change icon size on mouse over - (FontAwesome + Bootstrap) -

i want display 2x icon size on mouse on element.

i'm using fontawesome bootstrap. have list this:

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

i want add together "icon-2x" fontawesome css class, on mouse on element, display larger icon, , remove class on mouse leave.

i want fontawesome homepage examples. this:

i tried finding elemets jquery add together css class, couldn't it.

can help me?

thanks

why don't utilize css :hover?

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

fontawesome uses font icons, double icon size double font size. of course of study you'd need cater padding, margins , whatever else ensure icon stays relative text beside it.

if still want utilize jquery add together new class:

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

jquery html css twitter-bootstrap font-awesome

Comments

Post a Comment

Popular posts from this blog

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more

r - url in CRAN extension manual -

r - url in CRAN extension manual - aesthetics question cran manuals. how create urls description field reddish , function when clicked (like first url in url field)? 1 appears reddish in manual first url in th url field, , of links (such in bugreports field) don't work.. here's description (chopped down): package: bundle type: bundle title: stuff version: 0.2.1 date: 2012-05-09 author: me maintainer: bob <bob@gmail.com> depends: r (>= 2.15), imports: gridextra suggests: plyr lazydata: true description: bundle awesome. note: qdap not compiled mac users. installation instructions mac user or other os users having difficulty installing qdap please visit: http://trinker.github.com/qdap_install/installation license: gpl-2 url: http://trinker.github.com/qdap/ https://github.com/trinker/qdap bugreports: https://github.com/trinker/qdap/issues collate: 'adjacency_matrix.r' and manual: https://dl.dropbox.com/u/61803503/qd...
Read more

asp.net - .NET Control.ID property inconsistency -

asp.net - .NET Control.ID property inconsistency - please have @ code below: partial class _default inherits system.web.ui.page protected sub page_load(byval sender object, byval e system.eventargs) handles me.load dim c1 new checkbox c1.id = "test1/" 'line 7 placeholder1.controls.add(c1) end sub protected sub button1_click(byval sender object, byval e system.eventargs) handles button1.click each c command in page.controls each d command in c.controls each f command in d.controls each g command in f.controls each h command in g.controls if typeof h checkbox dim cbox new checkbox cbox = ctype(h, checkbox) msgbox(cbox.checked) 'line 20 end if next ...
Read more