关于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”

 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值