- Font Awesome
- Font Awesome 图标
- Font Awesome - 网页图标
- Font Awesome - 手部图标
- Font Awesome - 交通图标
- Font Awesome - 性别图标
- Font Awesome - 文件类型图标
- Font Awesome - 加载动画图标
- Font Awesome - 表单控件图标
- Font Awesome - 支付图标
- Font Awesome - 图表图标
- Font Awesome - 货币图标
- Font Awesome - 文本编辑器图标
- Font Awesome - 方向图标
- Font Awesome - 播放器图标
- Font Awesome - 品牌图标
- Font Awesome - 医疗图标
- Material Icons
- Material Icons
- Material - 操作图标
- Material - 警报图标
- Material - 音视频图标
- Material - 通信图标
- Material - 内容图标
- Material - 设备图标
- Material - 编辑器图标
- Material - 文件图标
- Material - 硬件图标
- Material - 图片图标
- Material - 地图图标
- Material - 导航图标
- Material - 通知图标
- Material - 社交图标
- Material - 切换图标
- Bootstrap Glyphicons
- Bootstrap Glyphicons
- Bootstrap - 组件
- 网页图标实用资源
- 网页图标 - 快速指南
- 网页图标 - 有用资源
- 网页图标 - 讨论
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> |
广告