关于Font Awesome图标的使用

Font Awesome，原只为Bootstrap而设计的字体图标，不过，现在你可以单独用它来为你的网站工作。丢掉图片图标吧，一起来用Font Awesome！Font Awesome几乎囊括了网页中可能用到的所有图标，这些图标通过Web Font的方式来显示，可以被任意缩放、改变颜色，你可以像修改文字样式那样来修改图标样式。

Font Awesome 特性：

1、一个字体文件， 249 个图标。

2、用CSS控制样式。

3、无限缩放。

4、个人、商业均可自由使用。

5、支持IE7+。

6、在Retina屏幕上也能完美呈现。

7、设计师的助手。

8、兼容屏幕阅读器。

Font Awesome的使用：

1、先下载Font Awesome字体样式文件和字体。CSS样式文件下载清点这里，字体下载请点这里

2、将下载的字体和CSS样式文件拷贝到你的项目目录中去。

3、随便选择一个CSS样式文件，你可以选择font-awesome.less或者font-awesome.min.css作为你的图标样式文件。

4、打开你所选择的样式文件，编辑样式文件中的字体路径，当然这个路径是针对你css样式文件位置来确定的。

5、在你的项目中引用样式文件即可。
例如：
<link rel=”stylesheet” href=”../css/font-awesome.min.css”>
or
<link rel=”stylesheet” href=”../css/font-awesome.css”>
如需兼容IE浏览器，那请下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
<!–[if IE 7]>
<link rel=”stylesheet” href=”assets/css/font-awesome-ie7.min.css”>
<![endif]–>

6、在你需要使用这些图标的地方加上一个html标签，给该标签一个class属性，属性值请参阅以下 Font Awesome图片集。

引用方式： class=”fa fa-home”

4.0新加入的10种Icons

 fa-rub  fa-ruble (别称)  fa-rouble (别称)  fa-pagelines  fa-stack-exchange  fa-arrow-circle-o-right  fa-arrow-circle-o-left  fa-caret-square-o-left  fa-toggle-left (别称)  fa-dot-circle-o  fa-wheelchair  fa-vimeo-square  fa-try  fa-turkish-lira (别称)

Web应用Icons

 fa-adjust  fa-anchor  fa-archive  fa-asterisk  fa-ban  fa-bar-chart-o  fa-barcode  fa-beer  fa-bell  fa-bell-o  fa-bolt  fa-book  fa-bookmark  fa-bookmark-o  fa-briefcase  fa-bug  fa-building  fa-bullhorn  fa-bullseye  fa-calendar  fa-calendar-o  fa-camera  fa-camera-retro  fa-caret-square-o-down  fa-caret-square-o-left  fa-caret-square-o-right  fa-caret-square-o-up  fa-certificate  fa-check  fa-check-circle  fa-check-circle-o  fa-check-square  fa-check-square-o  fa-circle  fa-circle-o  fa-clock-o  fa-cloud  fa-cloud-download  fa-cloud-upload  fa-code  fa-code-fork  fa-coffee  fa-cog  fa-cogs  fa-collapse-o  fa-comment  fa-comment-o  fa-comments  fa-comments-o  fa-compass  fa-credit-card  fa-crop  fa-crosshairs  fa-cutlery  fa-dashboard (别称)  fa-desktop  fa-dot-circle-o  fa-download  fa-edit (别称)  fa-ellipsis-horizontal  fa-ellipsis-vertical  fa-envelope  fa-envelope-o  fa-eraser  fa-exchange  fa-exclamation  fa-exclamation-circle  fa-exclamation-triangle  fa-expand-o  fa-external-link  fa-external-link-square  fa-eye  fa-eye-slash  fa-female  fa-fighter-jet  fa-film  fa-filter  fa-fire  fa-fire-extinguisher  fa-flag  fa-flag-checkered  fa-flag-o  fa-flash (别称)  fa-flask  fa-folder  fa-folder-o  fa-folder-open  fa-folder-open-o  fa-frown-o  fa-gamepad  fa-gavel  fa-gear (别称)  fa-gears (别称)  fa-gift  fa-glass  fa-globe  fa-group  fa-hdd-o  fa-headphones  fa-heart  fa-heart-o  fa-home  fa-inbox  fa-info  fa-info-circle  fa-key  fa-keyboard-o  fa-laptop  fa-leaf  fa-legal (别称)  fa-lemon-o  fa-level-down  fa-level-up  fa-lightbulb-o  fa-location-arrow  fa-lock  fa-magic  fa-magnet  fa-mail-forward (别称)  fa-mail-reply (别称)  fa-mail-reply-all  fa-male  fa-map-marker  fa-meh-o  fa-microphone  fa-microphone-slash  fa-minus  fa-minus-circle  fa-minus-square  fa-minus-square-o  fa-mobile  fa-mobile-phone (别称)  fa-money  fa-moon-o  fa-move  fa-music  fa-pencil  fa-pencil-square  fa-pencil-square-o  fa-phone  fa-phone-square  fa-picture-o  fa-plane  fa-plus  fa-plus-circle  fa-plus-square  fa-power-off  fa-print  fa-puzzle-piece  fa-qrcode  fa-question  fa-question-circle  fa-quote-left  fa-quote-right  fa-random  fa-refresh  fa-reorder  fa-reply  fa-reply-all  fa-resize-horizontal  fa-resize-vertical  fa-retweet  fa-road  fa-rocket  fa-rss  fa-rss-square  fa-search  fa-search-minus  fa-search-plus  fa-share  fa-share-square  fa-share-square-o  fa-shield  fa-shopping-cart  fa-sign-in  fa-sign-out  fa-signal  fa-sitemap  fa-smile-o  fa-sort  fa-sort-alpha-asc  fa-sort-alpha-desc  fa-sort-amount-asc  fa-sort-amount-desc  fa-sort-asc  fa-sort-desc  fa-sort-down (别称)  fa-sort-numeric-asc  fa-sort-numeric-desc  fa-sort-up (别称)  fa-spinner  fa-square  fa-square-o  fa-star  fa-star-half  fa-star-half-empty (别称)  fa-star-half-full (别称)  fa-star-half-o  fa-star-o  fa-subscript  fa-suitcase  fa-sun-o  fa-superscript  fa-tablet  fa-tachometer  fa-tag  fa-tags  fa-tasks  fa-terminal  fa-thumb-tack  fa-thumbs-down  fa-thumbs-o-down  fa-thumbs-o-up  fa-thumbs-up  fa-ticket  fa-times  fa-times-circle  fa-times-circle-o  fa-tint  fa-toggle-down (别称)  fa-toggle-left (别称)  fa-toggle-right (别称)  fa-toggle-up (别称)  fa-trash-o  fa-trophy  fa-truck  fa-umbrella  fa-unlock  fa-unlock-o  fa-unsorted (别称)  fa-upload  fa-user  fa-video-camera  fa-volume-down  fa-volume-off  fa-volume-up  fa-warning (别称)  fa-wheelchair  fa-wrench

表单管理Icons

 fa-check-square  fa-check-square-o  fa-circle  fa-circle-o  fa-dot-circle-o  fa-minus-square  fa-minus-square-o  fa-square  fa-square-o

货币Icons

 fa-bitcoin (别称)  fa-btc  fa-cny (别称)  fa-dollar (别称)  fa-eur  fa-euro (别称)  fa-gbp  fa-inr  fa-jpy  fa-krw  fa-money  fa-rmb (别称)  fa-rouble (别称)  fa-rub  fa-ruble (别称)  fa-rupee (别称)  fa-try  fa-turkish-lira (别称)  fa-usd  fa-won (别称)  fa-yen (别称)

文本编辑Icons

 fa-align-center  fa-align-justify  fa-align-left  fa-align-right  fa-bold  fa-chain (别称)  fa-chain-broken  fa-clipboard  fa-columns  fa-copy (别称)  fa-cut (别称)  fa-dedent (别称)  fa-eraser  fa-file  fa-file-o  fa-file-text  fa-file-text-o  fa-files-o  fa-floppy-o  fa-font  fa-indent  fa-italic  fa-link  fa-list  fa-list-alt  fa-list-ol  fa-list-ul  fa-outdent  fa-paperclip  fa-paste (别称)  fa-repeat  fa-rotate-left (别称)  fa-rotate-right (别称)  fa-save (别称)  fa-scissors  fa-strikethrough  fa-table  fa-text-height  fa-text-width  fa-th  fa-th-large  fa-th-list  fa-underline  fa-undo  fa-unlink (别称)

方向Icons

 fa-angle-double-down  fa-angle-double-left  fa-angle-double-right  fa-angle-double-up  fa-angle-down  fa-angle-left  fa-angle-right  fa-angle-up  fa-arrow-circle-down  fa-arrow-circle-left  fa-arrow-circle-o-down  fa-arrow-circle-o-left  fa-arrow-circle-o-right  fa-arrow-circle-o-up  fa-arrow-circle-right  fa-arrow-circle-up  fa-arrow-down  fa-arrow-left  fa-arrow-right  fa-arrow-up  fa-caret-down  fa-caret-left  fa-caret-right  fa-caret-square-o-down  fa-caret-square-o-left  fa-caret-square-o-right  fa-caret-square-o-up  fa-caret-up  fa-chevron-circle-down  fa-chevron-circle-left  fa-chevron-circle-right  fa-chevron-circle-up  fa-chevron-down  fa-chevron-left  fa-chevron-right  fa-chevron-up  fa-hand-o-down  fa-hand-o-left  fa-hand-o-right  fa-hand-o-up  fa-long-arrow-down  fa-long-arrow-left  fa-long-arrow-right  fa-long-arrow-up  fa-toggle-down (别称)  fa-toggle-left (别称)  fa-toggle-right (别称)  fa-toggle-up (别称)

视频播放器Icons

 fa-backward  fa-eject  fa-fast-backward  fa-fast-forward  fa-forward  fa-fullscreen  fa-pause  fa-play  fa-play-circle  fa-play-circle-o  fa-resize-full  fa-resize-small  fa-step-backward  fa-step-forward  fa-stop  fa-youtube-play

品牌Icons

 fa-adn  fa-android  fa-apple  fa-bitbucket  fa-bitbucket-square  fa-bitcoin (别称)  fa-btc  fa-css3  fa-dribbble  fa-dropbox  fa-facebook  fa-facebook-square  fa-flickr  fa-foursquare  fa-github  fa-github-alt  fa-github-square  fa-gittip  fa-google-plus  fa-google-plus-square  fa-html5  fa-instagram  fa-linkedin  fa-linkedin-square  fa-linux  fa-maxcdn  fa-pagelines  fa-pinterest  fa-pinterest-square  fa-renren  fa-skype  fa-stack-exchange  fa-stack-overflow  fa-trello  fa-tumblr  fa-tumblr-square  fa-twitter  fa-twitter-square  fa-vimeo-square  fa-vk  fa-weibo  fa-windows  fa-xing  fa-xing-square  fa-youtube  fa-youtube-play  fa-youtube-square

医疗Icons

 fa-ambulance  fa-h-square  fa-hospital-o  fa-medkit  fa-plus-square  fa-stethoscope  fa-user-md  fa-wheelchair
from: http://www.fromars.com/11240.html 《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的关于Font Awesome图标的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。