关于Font Awesome图标的使用

时间:2023-02-05 22:28:01

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”

 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 (别称)  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  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  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 (别称)  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 (别称)  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 (别称)  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  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  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