Bootstrap icons vs Glyphicons Pro

In this example below you will see how to do a Bootstrap icons vs Glyphicons Pro with some HTML / CSS and Javascript

Bootstrap icons: http://getbootstrap.com/components/#glyphicons-glyphs Glyphicons Pro: http://www.glyphicons.com/

Thumbnail
This awesome code was written by chrismbarr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrismbarr ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap icons vs Glyphicons Pro</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  Results:
<pre id="output"></pre>

<hr />

To get the list of Glyphicon Pro classes, go to <a href="http://www.glyphicons.com/">Glyphicons.com</a> and run the following in the console:
<pre>var proIcons="";
$(".font-list-glyphicons li .glyphicons").each(function(i,el){
  proIcons += el.attributes.class.value.replace("glyphicons glyphicons-","")+",";
});
proIcons = proIcons.substring(0, proIcons.length - 1);
console.log(proIcons);</pre>

<hr />

To get the list of Bootstrap Glyphicon classes, go to the <a href="https://getbootstrap.com/components/#glyphicons-glyphs">Bootstrap Docs</a> and run the following in the console:
<pre>var bsIcons="";
$(".bs-glyphicons-list li .glyphicon").each(function(i,el){
  bsIcons+=el.attributes.class.value.replace("glyphicon glyphicon-","")+",";
});
bsIcons = bsIcons.substring(0, bsIcons.length - 1);
console.log(bsIcons);</pre>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrismbarr/bootstrap-icons-vs-glyphicons-pro-epmgeb */
pre{
  padding: 20px;
  background: #EEE;
}

/*Downloaded from https://www.codeseek.co/chrismbarr/bootstrap-icons-vs-glyphicons-pro-epmgeb */
var bsIcons = "asterisk,plus,euro,eur,minus,cloud,envelope,pencil,glass,music,search,heart,star,star-empty,user,film,th-large,th,th-list,ok,remove,zoom-in,zoom-out,off,signal,cog,trash,home,file,time,road,download-alt,download,upload,inbox,play-circle,repeat,refresh,list-alt,lock,flag,headphones,volume-off,volume-down,volume-up,qrcode,barcode,tag,tags,book,bookmark,print,camera,font,bold,italic,text-height,text-width,align-left,align-center,align-right,align-justify,list,indent-left,indent-right,facetime-video,picture,map-marker,adjust,tint,edit,share,check,move,step-backward,fast-backward,backward,play,pause,stop,forward,fast-forward,step-forward,eject,chevron-left,chevron-right,plus-sign,minus-sign,remove-sign,ok-sign,question-sign,info-sign,screenshot,remove-circle,ok-circle,ban-circle,arrow-left,arrow-right,arrow-up,arrow-down,share-alt,resize-full,resize-small,exclamation-sign,gift,leaf,fire,eye-open,eye-close,warning-sign,plane,calendar,random,comment,magnet,chevron-up,chevron-down,retweet,shopping-cart,folder-close,folder-open,resize-vertical,resize-horizontal,hdd,bullhorn,bell,certificate,thumbs-up,thumbs-down,hand-right,hand-left,hand-up,hand-down,circle-arrow-right,circle-arrow-left,circle-arrow-up,circle-arrow-down,globe,wrench,tasks,filter,briefcase,fullscreen,dashboard,paperclip,heart-empty,link,phone,pushpin,usd,gbp,sort,sort-by-alphabet,sort-by-alphabet-alt,sort-by-order,sort-by-order-alt,sort-by-attributes,sort-by-attributes-alt,unchecked,expand,collapse-down,collapse-up,log-in,flash,log-out,new-window,record,save,open,saved,import,export,send,floppy-disk,floppy-saved,floppy-remove,floppy-save,floppy-open,credit-card,transfer,cutlery,header,compressed,earphone,phone-alt,tower,stats,sd-video,hd-video,subtitles,sound-stereo,sound-dolby,sound-5-1,sound-6-1,sound-7-1,copyright-mark,registration-mark,cloud-download,cloud-upload,tree-conifer,tree-deciduous,cd,save-file,open-file,level-up,copy,paste,alert,equalizer,king,queen,pawn,bishop,knight,baby-formula,tent,blackboard,bed,apple,erase,hourglass,lamp,duplicate,piggy-bank,scissors,bitcoin,btc,xbt,yen,jpy,ruble,rub,scale,ice-lolly,ice-lolly-tasted,education,option-horizontal,option-vertical,menu-hamburger,modal-window,oil,grain,sunglasses,text-size,text-color,text-background,object-align-top,object-align-bottom,object-align-horizontal,object-align-left,object-align-vertical,object-align-right,triangle-right,triangle-left,triangle-bottom,triangle-top,console,superscript,subscript,menu-left,menu-right,menu-down,menu-up".split(",");

var proIcons = "glass,leaf,dog,user,girl,car,user-add,user-remove,film,magic,envelope,camera,heart,beach-umbrella,train,print,bin,music,note,heart-empty,home,snowflake,fire,magnet,parents,binoculars,road,search,cars,notes-2,pencil,bus,wifi-alt,luggage,old-man,woman,file,coins,airplane,notes,stats,charts,pie-chart,group,keys,calendar,router,camera-small,star-empty,star,link,eye-open,eye-close,alarm,clock,stopwatch,projector,history,truck,cargo,compass,keynote,paperclip,power,lightbulb,tag,tags,cleaning,ruller,gift,umbrella,book,bookmark,wifi,cup,stroller,headphones,headset,warning-sign,signal,retweet,refresh,roundabout,random,heat,repeat,display,log-book,address-book,building,eyedropper,adjust,tint,crop,vector-path-square,vector-path-circle,vector-path-polygon,vector-path-line,vector-path-curve,vector-path-all,font,italic,bold,text-underline,text-strike,text-height,text-width,text-resize,left-indent,right-indent,align-left,align-center,align-right,justify,list,text-smaller,text-bigger,embed,embed-close,table,message-full,message-empty,message-in,message-out,message-plus,message-minus,message-ban,message-flag,message-lock,message-new,inbox,inbox-plus,inbox-minus,inbox-lock,inbox-in,inbox-out,cogwheel,cogwheels,picture,adjust-alt,database-lock,database-plus,database-minus,database-ban,folder-open,folder-plus,folder-minus,folder-lock,folder-flag,folder-new,edit,new-window,check,unchecked,more-windows,show-big-thumbnails,show-thumbnails,show-thumbnails-with-lines,show-lines,playlist,imac,macbook,ipad,iphone,iphone-transfer,iphone-exchange,ipod,ipod-shuffle,ear-plugs,record,step-backward,fast-backward,rewind,play,pause,stop,forward,fast-forward,step-forward,eject,facetime-video,download-alt,mute,volume-down,volume-up,screenshot,move,more,brightness-reduce,brightness-increase,circle-plus,circle-minus,circle-remove,circle-ok,circle-question-mark,circle-info,circle-exclamation-mark,remove,ok,ban,download,upload,shopping-cart,lock,unlock,electricity,ok-2,remove-2,cart-out,cart-in,left-arrow,right-arrow,down-arrow,up-arrow,resize-small,resize-full,circle-arrow-left,circle-arrow-right,circle-arrow-top,circle-arrow-down,play-button,unshare,share,chevron-right,chevron-left,bluetooth,euro,usd,gbp,retweet-2,moon,sun,cloud,direction,brush,pen,zoom-in,zoom-out,pin,albums,rotation-lock,flash,google-maps,anchor,conversation,chat,male,female,asterisk,divide,snorkel-diving,scuba-diving,oxygen-bottle,fins,fishes,boat,delete,sheriffs-star,qrcode,barcode,pool,buoy,spade,bank,vcard,electrical-plug,flag,credit-card,keyboard-wireless,keyboard-wired,shield,ring,cake,drink,beer,fast-food,cutlery,pizza,birthday-cake,tablet,settings,bullets,cardio,t-shirt,pants,sweater,fabric,leather,scissors,bomb,skull,celebration,tea-kettle,french-press,coffee-cup,pot,grater,kettle,hospital,hospital-h,microphone,webcam,temple-christianity-church,temple-islam,temple-hindu,temple-buddhist,bicycle,life-preserver,share-alt,comments,flower,baseball,rugby,ax,table-tennis,bowling,tree-conifer,tree-deciduous,more-items,sort,filter,gamepad,playing-dices,calculator,tie,wallet,piano,sampler,podium,soccer-ball,blog,dashboard,certificate,bell,candle,pushpin,iphone-shake,pin-flag,turtle,rabbit,globe,briefcase,hdd,thumbs-up,thumbs-down,hand-right,hand-left,hand-up,hand-down,fullscreen,shopping-bag,book-open,nameplate,nameplate-alt,vases,bullhorn,dumbbell,suitcase,file-import,file-export,bug,crown,smoking,cloud-download,cloud-upload,restart,security-camera,expand,collapse,collapse-top,globe-af,global,spray,nails,claw-hammer,classic-hammer,hand-saw,riflescope,electrical-socket-eu,electrical-socket-us,message-forward,coat-hanger,dress,bathrobe,shirt,underwear,log-in,log-out,exit,new-window-alt,video-sd,video-hd,subtitles,sound-stereo,sound-dolby,sound-5-1,sound-6-1,sound-7-1,copyright-mark,registration-mark,radar,skateboard,golf-course,sorting,sort-by-alphabet,sort-by-alphabet-alt,sort-by-order,sort-by-order-alt,sort-by-attributes,sort-by-attributes-alt,compressed,package,cloud-plus,cloud-minus,disk-save,disk-open,disk-saved,disk-remove,disk-import,disk-export,tower,send,git-branch,git-create,git-private,git-delete,git-merge,git-pull-request,git-compare,git-commit,construction-cone,shoe-steps,plus,minus,redo,undo,golf,hockey,pipe,wrench,folder-closed,phone-alt,earphone,floppy-disk,floppy-saved,floppy-remove,floppy-save,floppy-open,translate,fax,factory,shop-window,shop,kiosk,kiosk-wheels,kiosk-light,kiosk-food,transfer,money,header,blacksmith,saw-blade,basketball,server,server-plus,server-minus,server-ban,server-flag,server-lock,server-new,charging-station,gas-station,target,bed-alt,mosquito-net,dining-set,plate-of-food,hygiene-kit,blackboard,marriage,bucket,none-color-swatch,bring-forward,bring-to-front,send-backward,send-to-back,fit-frame-to-image,fit-image-to-frame,multiple-displays,handshake,child,baby-formula,medicine,atv-vehicle,motorcycle,bed,tent,glasses,sunglasses,family,education,shoes,map,cd,alert,piggy-bank,star-half,cluster,flowchart,commodities,duplicate,copy,paste,bath-bathtub,bath-shower,shower,menu-hamburger,option-vertical,option-horizontal,currency-conversion,user-ban,user-lock,user-flag,user-asterisk,user-alert,user-key,user-conversation,database,database-search,list-alt,hazard-sign,hazard,stop-sign,lab,lab-alt,ice-cream,ice-lolly,ice-lolly-tasted,invoice,cart-tick,hourglass,cat,lamp,scale-classic,eye-plus,eye-minus,quote,bitcoin,yen,ruble,erase,podcast,firework,scale,king,queen,pawn,bishop,knight,mic-mute,voicemail,paragraph,person-walking,person-wheelchair,underground,car-hov,car-rental,transport,taxi,ice-cream-no,uk-rat-u,uk-rat-pg,uk-rat-12a,uk-rat-12,uk-rat-15,uk-rat-18,uk-rat-r18,tv,sms,mms,us-rat-g,us-rat-pg,us-rat-pg-13,us-rat-restricted,us-rat-no-one-17,equalizer,speakers,remote-control,remote-control-tv,shredder,folder-heart,person-running,person,voice,stethoscope,hotspot,activity,watch,scissors-alt,car-wheel,chevron-up,chevron-down,superscript,subscript,text-size,text-color,text-background,modal-window,newspaper,tractor".split(",");

//===================================================================

var matches = _.intersection(bsIcons, proIcons);
var proOnly = _.filter(proIcons, function(i){
  return bsIcons.indexOf(i)<0;
});
var bsOnly = _.filter(bsIcons, function(i){
  return proIcons.indexOf(i)<0;
});


var html=""
html += "Bootstrap Icons: "+ bsIcons.length + "\n";
html += "Pro Icons      : "+ proIcons.length + "\n";
html += "---------------------\n";
html += "In Both        : "+ matches.length + "\n";
html += "Pro Only       : "+ proOnly.length + "\n";
html += "Bootstrap Only : "+ bsOnly.length;

document.getElementById("output").innerHTML = html;

Comments