What is the CSS that makes font-awesome's stack icons work? -


can explain css behind font awesome's stack icon? i'm trying create own custom stack icon font, fail them stack way font-awesome manage it.

i'm not sure specific css manage make stack "happen".

(as far know, not duplicate: there lot of questions how use font-awesome stack icons, none behind mechanism of it.)

the icons contained in fontawesome font. magic in number of helper css classes let select icon character , let position these icons easily. each class reponsible piece of functionality, give modular build-up of icon.

stacking when stacking 2 icons fontawesome, need span class fa-stack. span adds position: relative, allows position 2 stacked icons absolutely , doing so, making them overlap.

the size set 2em, because background (or overlay) twice size compared normal icon. givin exact width makes sure enough space claimed icons, smaller icon can centered horizontally.

the icons inside span class fa-stack-1x or fa-stack-2x dictates size , position within parent span.

so, summing notable classes (for icons , stacking):

  • fa set right font. makes icon out of element.
  • fa-twitter, , many others let select character. character added in css in content of ::before pseudo-element.
  • fa-stack defines container contain stacked icons. adds position: relative, can absolutely position icons in it.
  • fa-stack-2x makes icon twice size , positions @ 0,0 in parent container. used background or overlay icons.
  • fa-stack-1x uses 100% of width of parent , centers icon in it. used smaller image icon used background/overlay icon.

other features, rotation, work in similar way adding right class.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more