矢量图标+颜色库


<meta charset="utf-8" />
<base href="http://fontawesome.io/assets/font-awesome/css/" />
<title>矢量图标+颜色库</title>
<link rel="stylesheet" href="font-awesome.css">
<style type="text/css">
body,div{
    font-size:35px;
    line-height:35px;
}
button{height:86px;width:86px; margin:1px; border:0px solid #000000; color:#000;}
</style>
<body style="background-color:#343130;  margin:32px; width:883px; ">



<div style="">
<script type="text/javascript">  
(function(){
////////////////////////////////////////
var colors=['CC3366','CC0066','CC0000','CC0033','CC3300','CC3333','FF0000','FF3333','FF0033','FF0066','FF3366','FF3300','FF6600','FF6633','FF6666','CC6633','CC6600','999900','999933','339966','009966','009900','339933','339900','669999','669966','669900','669933','009933','66CC66','33CC66','33CC99','66CC99','00CC99','00CC66','66CC33','66CC00','00CC00','00CC33','33CC33','33CC00','33FF33','99FF33','66FF00','66FF33','00FF00','33FF00','66FF66','33FF66','00FF66','00FF33','99FF99','00FF99','00FFCC','66FF99','99FFCC','66FFCC','33FFCC','33FF99','CCFF66','CCFF33','CCFF00','99FF00','99FF66','FFFFCC','FFFF99','FFFF66','FFFF33','FFFF00','CCFF99','CCFFCC','99CC00','99CC33','99CC66','99CC99','CCCC00','CCCC33','CCCC66','CCCC99','FFCC99','FFCC00','FFCC33','FFCC66','CC9900','CC9933','CC9966','CC6666','FF9900','FF9933','FF9966','FF6699','FF0099','FF3399','FF33CC','FF00CC','FF99FF','FFCCFF','FFCCCC','FF9999','CC6699','FF99CC','FF66FF','FF00FF','FF33FF','FF66CC','CC0099','CC3399','993399','990099','9966CC','CC99CC','CC00CC','CC33CC','CC66CC','CC66FF','CC33FF','CC00FF','9933CC','9900CC','CC99FF','9999FF','9966FF','9933FF','9900FF','6666FF','6600CC','6666CC','666699','339999','009999','0099CC','3399CC','66CCCC','33CCCC','00CCCC','33FFFF','00FFFF','66FFFF','99FFFF','CCCCFF','9999CC','99CCFF','66CCFF','33CCFF','00CCFF','6699FF','6633FF','6600FF','3366CC','0066CC','0099FF','3399FF','6699CC','3366FF','0066FF','0033FF','3300FF','3333FF','0000FF','0000CC','3300CC','0033CC','3333CC','6633CC','996699','CC9999','CCCCCC','99CCCC','CCFFFF','FFFFFF'];

    var icons=['flag','address-book','address-book-o','address-card','address-card-o','bandcamp','bath','bathtub','drivers-license','drivers-license-o','eercast','envelope-open','envelope-open-o','etsy','free-code-camp','grav','handshake-o','id-badge','id-card','id-card-o','imdb','linode','meetup','microchip','podcast','quora','ravelry','s15','shower','snowflake-o','superpowers','telegram','thermometer','thermometer-0','thermometer-1','thermometer-2','thermometer-3','thermometer-4','thermometer-empty','thermometer-full','thermometer-half','thermometer-quarter','thermometer-three-quarters','times-rectangle','times-rectangle-o','user-circle','user-circle-o','user-o','vcard','vcard-o','window-close','window-close-o','window-maximize','window-minimize','window-restore','wpexplorer','address-book','address-book-o','address-card','address-card-o','adjust','american-sign-language-interpreting','anchor','archive','area-chart','arrows','arrows-h','arrows-v','asl-interpreting','assistive-listening-systems','asterisk','at','audio-description','automobile','balance-scale','ban','bank','bar-chart','bar-chart-o','barcode','bars','bath','bathtub','battery','battery-0','battery-1','battery-2','battery-3','battery-4','battery-empty','battery-full','battery-half','battery-quarter','battery-three-quarters','bed','beer','bell','bell-o','bell-slash','bell-slash-o','bicycle','binoculars','birthday-cake','blind','bluetooth','bluetooth-b','bolt','bomb','book','bookmark','bookmark-o','braille','briefcase','bug','building','building-o','bullhorn','bullseye','bus','cab','calculator','calendar','calendar-check-o','calendar-minus-o','calendar-o','calendar-plus-o','calendar-times-o','camera','camera-retro','car','caret-square-o-down','caret-square-o-left','caret-square-o-right','caret-square-o-up','cart-arrow-down','cart-plus','cc','certificate','check','check-circle','check-circle-o','check-square','check-square-o','child','circle','circle-o','circle-o-notch','circle-thin','clock-o','clone','close','cloud','cloud-download','cloud-upload','code','code-fork','coffee','cog','cogs','comment','comment-o','commenting','commenting-o','comments','comments-o','compass','copyright','creative-commons','credit-card','credit-card-alt','crop','crosshairs','cube','cubes','cutlery','dashboard','database','deaf','deafness','desktop','diamond','dot-circle-o','download','drivers-license','drivers-license-o','edit','ellipsis-h','ellipsis-v','envelope','envelope-o','envelope-open','envelope-open-o','envelope-square','eraser','exchange','exclamation','exclamation-circle','exclamation-triangle','external-link','external-link-square','eye','eye-slash','eyedropper','fax','feed','female','fighter-jet','file-archive-o','file-audio-o','file-code-o','file-excel-o','file-image-o','file-movie-o','file-pdf-o','file-photo-o','file-picture-o','file-powerpoint-o','file-sound-o','file-video-o','file-word-o','file-zip-o','film','filter','fire','fire-extinguisher','flag','flag-checkered','flag-o','flash','flask','folder','folder-o','folder-open','folder-open-o','frown-o','futbol-o','gamepad','gavel','gear','gears','gift','glass','globe','graduation-cap','group','hand-grab-o','hand-lizard-o','hand-paper-o','hand-peace-o','hand-pointer-o','hand-rock-o','hand-scissors-o','hand-spock-o','hand-stop-o','handshake-o','hard-of-hearing','hashtag','hdd-o','headphones','heart','heart-o','heartbeat','history','home','hotel','hourglass','hourglass-1','hourglass-2','hourglass-3','hourglass-end','hourglass-half','hourglass-o','hourglass-start','i-cursor','id-badge','id-card','id-card-o','image','inbox','industry','info','info-circle','institution','key','keyboard-o','language','laptop','leaf','legal','lemon-o','level-down','level-up','life-bouy','life-buoy','life-ring','life-saver','lightbulb-o','line-chart','location-arrow','lock','low-vision','magic','magnet','mail-forward','mail-reply','mail-reply-all','male','map','map-marker','map-o','map-pin','map-signs','meh-o','microchip','microphone','microphone-slash','minus','minus-circle','minus-square','minus-square-o','mobile','mobile-phone','money','moon-o','mortar-board','motorcycle','mouse-pointer','music','navicon','newspaper-o','object-group','object-ungroup','paint-brush','paper-plane','paper-plane-o','paw','pencil','pencil-square','pencil-square-o','percent','phone','phone-square','photo','picture-o','pie-chart','plane','plug','plus','plus-circle','plus-square','plus-square-o','podcast','power-off','print','puzzle-piece','qrcode','question','question-circle','question-circle-o','quote-left','quote-right','random','recycle','refresh','registered','remove','reorder','reply','reply-all','retweet','road','rocket','rss','rss-square','s15','search','search-minus','search-plus','send','send-o','server','share','share-alt','share-alt-square','share-square','share-square-o','shield','ship','shopping-bag','shopping-basket','shopping-cart','shower','sign-in','sign-language','sign-out','signal','signing','sitemap','sliders','smile-o','snowflake-o','soccer-ball-o','sort','sort-alpha-asc','sort-alpha-desc','sort-amount-asc','sort-amount-desc','sort-asc','sort-desc','sort-down','sort-numeric-asc','sort-numeric-desc','sort-up','space-shuttle','spinner','spoon','square','square-o','star','star-half','star-half-empty','star-half-full','star-half-o','star-o','sticky-note','sticky-note-o','street-view','suitcase','sun-o','support','tablet','tachometer','tag','tags','tasks','taxi','television','terminal','thermometer','thermometer-0','thermometer-1','thermometer-2','thermometer-3','thermometer-4','thermometer-empty','thermometer-full','thermometer-half','thermometer-quarter','thermometer-three-quarters','thumb-tack','thumbs-down','thumbs-o-down','thumbs-o-up','thumbs-up','ticket','times','times-circle','times-circle-o','times-rectangle','times-rectangle-o','tint','toggle-down','toggle-left','toggle-off','toggle-on','toggle-right','toggle-up','trademark','trash','trash-o','tree','trophy','truck','tty','tv','umbrella','universal-access','university','unlock','unlock-alt','unsorted','upload','user','user-circle','user-circle-o','user-o','user-plus','user-secret','user-times','users','vcard','vcard-o','video-camera','volume-control-phone','volume-down','volume-off','volume-up','warning','wheelchair','wheelchair-alt','wifi','window-close','window-close-o','window-maximize','window-minimize','window-restore','wrench','american-sign-language-interpreting','asl-interpreting','assistive-listening-systems','audio-description','blind','braille','cc','deaf','deafness','hard-of-hearing','low-vision','question-circle-o','sign-language','signing','tty','universal-access','volume-control-phone','wheelchair','wheelchair-alt','hand-grab-o','hand-lizard-o','hand-o-down','hand-o-left','hand-o-right','hand-o-up','hand-paper-o','hand-peace-o','hand-pointer-o','hand-rock-o','hand-scissors-o','hand-spock-o','hand-stop-o','thumbs-down','thumbs-o-down','thumbs-o-up','thumbs-up','ambulance','automobile','bicycle','bus','cab','car','fighter-jet','motorcycle','plane','rocket','ship','space-shuttle','subway','taxi','train','truck','wheelchair','wheelchair-alt','genderless','intersex','mars','mars-double','mars-stroke','mars-stroke-h','mars-stroke-v','mercury','neuter','transgender','transgender-alt','venus','venus-double','venus-mars','file','file-archive-o','file-audio-o','file-code-o','file-excel-o','file-image-o','file-movie-o','file-o','file-pdf-o','file-photo-o','file-picture-o','file-powerpoint-o','file-sound-o','file-text','file-text-o','file-video-o','file-word-o','file-zip-o','info-circle fa-lg fa-li','circle-o-notch','cog','gear','refresh','spinner','check-square','check-square-o','circle','circle-o','dot-circle-o','minus-square','minus-square-o','plus-square','plus-square-o','square','square-o','cc-amex','cc-diners-club','cc-discover','cc-jcb','cc-mastercard','cc-paypal','cc-stripe','cc-visa','credit-card','credit-card-alt','google-wallet','paypal','area-chart','bar-chart','bar-chart-o','line-chart','pie-chart','bitcoin','btc','cny','dollar','eur','euro','gbp','gg','gg-circle','ils','inr','jpy','krw','money','rmb','rouble','rub','ruble','rupee','shekel','sheqel','try','turkish-lira','usd','won','yen','align-center','align-justify','align-left','align-right','bold','chain','chain-broken','clipboard','columns','copy','cut','dedent','eraser','file','file-o','file-text','file-text-o','files-o','floppy-o','font','header','indent','italic','link','list','list-alt','list-ol','list-ul','outdent','paperclip','paragraph','paste','repeat','rotate-left','rotate-right','save','scissors','strikethrough','subscript','superscript','table','text-height','text-width','th','th-large','th-list','underline','undo','unlink','angle-double-down','angle-double-left','angle-double-right','angle-double-up','angle-down','angle-left','angle-right','angle-up','arrow-circle-down','arrow-circle-left','arrow-circle-o-down','arrow-circle-o-left','arrow-circle-o-right','arrow-circle-o-up','arrow-circle-right','arrow-circle-up','arrow-down','arrow-left','arrow-right','arrow-up','arrows','arrows-alt','arrows-h','arrows-v','caret-down','caret-left','caret-right','caret-square-o-down','caret-square-o-left','caret-square-o-right','caret-square-o-up','caret-up','chevron-circle-down','chevron-circle-left','chevron-circle-right','chevron-circle-up','chevron-down','chevron-left','chevron-right','chevron-up','exchange','hand-o-down','hand-o-left','hand-o-right','hand-o-up','long-arrow-down','long-arrow-left','long-arrow-right','long-arrow-up','toggle-down','toggle-left','toggle-right','toggle-up','arrows-alt','backward','compress','eject','expand','fast-backward','fast-forward','forward','pause','pause-circle','pause-circle-o','play','play-circle','play-circle-o','random','step-backward','step-forward','stop','stop-circle','stop-circle-o','youtube-play','500px','adn','amazon','android','angellist','apple','bandcamp','behance','behance-square','bitbucket','bitbucket-square','bitcoin','black-tie','bluetooth','bluetooth-b','btc','buysellads','cc-amex','cc-diners-club','cc-discover','cc-jcb','cc-mastercard','cc-paypal','cc-stripe','cc-visa','chrome','codepen','codiepie','connectdevelop','contao','css3','dashcube','delicious','deviantart','digg','dribbble','dropbox','drupal','edge','eercast','empire','envira','etsy','expeditedssl','fa','facebook','facebook-f','facebook-official','facebook-square','firefox','first-order','flickr','font-awesome','fonticons','fort-awesome','forumbee','foursquare','free-code-camp','ge','get-pocket','gg','gg-circle','git','git-square','github','github-alt','github-square','gitlab','gittip','glide','glide-g','google','google-plus','google-plus-circle','google-plus-official','google-plus-square','google-wallet','gratipay','grav','hacker-news','houzz','html5','imdb','instagram','internet-explorer','ioxhost','joomla','jsfiddle','lastfm','lastfm-square','leanpub','linkedin','linkedin-square','linode','linux','maxcdn','meanpath','medium','meetup','mixcloud','modx','odnoklassniki','odnoklassniki-square','opencart','openid','opera','optin-monster','pagelines','paypal','pied-piper','pied-piper-alt','pied-piper-pp','pinterest','pinterest-p','pinterest-square','product-hunt','qq','quora','ra','ravelry','rebel','reddit','reddit-alien','reddit-square','renren','resistance','safari','scribd','sellsy','share-alt','share-alt-square','shirtsinbulk','simplybuilt','skyatlas','skype','slack','slideshare','snapchat','snapchat-ghost','snapchat-square','soundcloud','spotify','stack-exchange','stack-overflow','steam','steam-square','stumbleupon','stumbleupon-circle','superpowers','telegram','tencent-weibo','themeisle','trello','tripadvisor','tumblr','tumblr-square','twitch','twitter','twitter-square','usb','viacoin','viadeo','viadeo-square','vimeo','vimeo-square','vine','vk','wechat','weibo','weixin','whatsapp','wikipedia-w','windows','wordpress','wpbeginner','wpexplorer','wpforms','xing','xing-square','y-combinator','y-combinator-square','yahoo','yc','yc-square','yelp','yoast','youtube','youtube-play','youtube-square','ambulance','h-square','heart','heart-o','heartbeat','hospital-o','medkit','plus-square','stethoscope','user-md','wheelchair','wheelchair-alt'];
    
    var v;
    var str='';
    var c=0;
    //alert(colors.length);
    for (var i=0; i<icons.length; i++) {  
        if(c>=colors.length){c=0;}else{c++;} 
        str+='<button class="fa fa-'+icons[i]+'" style="background-color:#'+colors[c]+'"></button>';
        
    }

    
    document.write(str);//


////////////////////////////////////////
})();
</script>
</div>
</body>

程序运行结果如下,点击这里亲自运行看看