Font Awesome - 品牌图标



本章解释了 Font Awesome 品牌图标的使用方法。假设 custom 是我们定义大小和颜色的 CSS 类名,如下面的示例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表显示了 Font Awesome 品牌图标的使用方法和结果。将上面程序的 <body> 标签替换为表中给出的代码,即可获得相应的输出 -

用法 图标
<i class="fa fa-500px custom"></i>
<i class="fa fa-amazon custom"></i>
<i class="fa fa-android custom"></i>
<i class="fa fa-angellist custom"></i>
<i class="fa fa-adn custom"></i>
<i class="fa fa-apple custom"></i>
<i class="fa fa-behance custom"></i>
<i class="fa fa-behance-square custom"></i>
<i class="fa fa-bitbucket custom"></i>
<i class="fa fa-bitbucket-square custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-black-tie custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-buysellads custom"></i>
<i class="fa fa-cc-amex custom"></i>
<i class="fa fa-cc-diners-club custom"></i>
<i class="fa fa-cc-discover custom"></i>
<i class="fa fa-cc-jcb custom"></i>
<i class="fa fa-cc-mastercard custom"></i>
<i class="fa fa-cc-paypal custom"></i>
<i class="fa fa-cc-stripe custom"></i>
<i class="fa fa-cc-visa custom"></i>
<i class="fa fa-chrome custom"></i>
<i class="fa fa-codepen custom"></i>
<i class="fa fa-connectdevelop custom"></i>
<i class="fa fa-contao custom"></i>
<i class="fa fa-css3 custom"></i>
<i class="fa fa-dashcube custom"></i>
<i class="fa fa-delicious custom"></i>
<i class="fa fa-deviantart custom"></i>
<i class="fa fa-digg custom"></i>
<i class="fa fa-dribbble custom"></i>
<i class="fa fa-dropbox custom"></i>
<i class="fa fa-drupal custom"></i>
<i class="fa fa-empire custom"></i>
<i class="fa fa-expeditedssl custom"></i>
<i class="fa fa-facebook custom"></i>
<i class="fa fa-facebook-f custom"></i>
<i class="fa fa-facebook-official custom"></i>
<i class="fa fa-facebook-square custom"></i>
<i class="fa fa-firefox custom"></i>
<i class="fa fa-flickr custom"></i>
<i class="fa fa-fonticons custom"></i>
<i class="fa fa-forumbee custom"></i>
<i class="fa fa-foursquare custom"></i>
<i class="fa fa-ge custom"></i>
<i class="fa fa-get-pocket custom"></i>
<i class="fa fa-gg custom"></i>
<i class="fa fa-gg-circle custom"></i>
<i class="fa fa-git custom"></i>
<i class="fa fa-git-square custom"></i>
<i class="fa fa-github custom"></i>
<i class="fa fa-github-alt custom"></i>
<i class="fa fa-github-square custom"></i>
<i class="fa fa-gratipay custom"></i>
<i class="fa fa-google custom"></i>
<i class="fa fa-google-plus custom"></i>
<i class="fa fa-google-plus-square custom"></i>
<i class="fa fa-youtube-play custom"></i>
<i class="fa fa-gratipay custom"></i>
<i class="fa fa-hacker-news custom"></i>
<i class="fa fa-houzz custom"></i>
<i class="fa fa-html5 custom"></i>
<i class="fa fa-instagram custom"></i>
<i class="fa fa-internet-explorer custom"></i>
<i class="fa fa-ioxhost custom"></i>
<i class="fa fa-joomla custom"></i>
<i class="fa fa-jsfiddle custom"></i>
<i class="fa fa-lastfm custom"></i>
<i class="fa fa-lastfm-square custom"></i>
<i class="fa fa-leanpub custom"></i>
<i class="fa fa-linkedin custom"></i>
<i class="fa fa-linkedin-square custom"></i>
<i class="fa fa-linux custom"></i>
<i class="fa fa-maxcdn custom"></i>
<i class="fa fa-meanpath custom"></i>
<i class="fa fa-medium custom"></i>
<i class="fa fa-odnoklassniki custom"></i>
<i class="fa fa-odnoklassniki-square custom"></i>
<i class="fa fa-opencart custom"></i>
<i class="fa fa-opera custom"></i>
<i class="fa fa-optin-monster custom"></i>
<i class="fa fa-openid custom"></i>
<i class="fa fa-pagelines custom"></i>
<i class="fa fa-youtube custom"></i>
<i class="fa fa-pied-piper custom"></i>
<i class="fa fa-pied-piper-alt custom"></i>
<i class="fa fa-pinterest custom"></i>
<i class="fa fa-pinterest-p custom"></i>
<i class="fa fa-pinterest-square custom"></i>
<i class="fa fa-qq custom"></i>
<i class="fa fa-ra custom"></i>
<i class="fa fa-rebel custom"></i>
<i class="fa fa-reddit custom"></i>
<i class="fa fa-renren custom"></i>
<i class="fa fa-amazon custom"></i>
<i class="fa fa-safari custom"></i>
<i class="fa fa-sellsy custom"></i>
<i class="fa fa-youtube-square custom"></i>
<i class="fa fa-share-alt custom"></i>
<i class="fa fa-share-alt-square custom"></i>
<i class="fa fa-shirtsinbulk custom"></i>
<i class="fa fa-simplybuilt custom"></i>
<i class="fa fa-skyatlas custom"></i>
<i class="fa fa-skype custom"></i>
<i class="fa fa-slack custom"></i>
<i class="fa fa-yc-square custom"></i>
<i class="fa fa-soundcloud custom"></i>
<i class="fa fa-spotify custom"></i>
<i class="fa fa-stack-exchange custom"></i>
<i class="fa fa-stack-overflow custom"></i>
<i class="fa fa-steam custom"></i>
<i class="fa fa-steam-square custom"></i>
<i class="fa fa-stumbleupon custom"></i>
<i class="fa fa-stumbleupon-circle custom"></i>
<i class="fa fa-tencent-weibo custom"></i>
<i class="fa fa-trello custom"></i>
<i class="fa fa-tripadvisor custom"></i>
<i class="fa fa-tumblr custom"></i>
<i class="fa fa-tumblr-square custom"></i>
<i class="fa fa-yahoo custom"></i>
<i class="fa fa-twitter custom"></i>
<i class="fa fa-twitter-square custom"></i>
<i class="fa fa-viacoin custom"></i>
<i class="fa fa-vimeo custom"></i>
<i class="fa fa-vimeo-square custom"></i>
<i class="fa fa-vine custom"></i>
<i class="fa fa-vk custom"></i>
<i class="fa fa-wechat custom"></i>
<i class="fa fa-weibo custom"></i>
<i class="fa fa-weixin custom"></i>
<i class="fa fa-whatsapp custom"></i>
<i class="fa fa-wikipedia-w custom"></i>
<i class="fa fa-windows custom"></i>
<i class="fa fa-wordpress custom"></i>
<i class="fa fa-xing custom"></i>
<i class="fa fa-xing-square custom"></i>
<i class="fa fa-y-combinator custom"></i>
<i class="fa fa-y-combinator-square custom"></i>
<i class="fa fa-yc custom"></i>
广告