font-font awesome图标大小叠加可以吗

&&&&矢量字体图标Font-Awesome相关实例
矢量字体图标Font-Awesome相关实例
矢量字体图标Font-Awesome相关实例介绍
若举报审核通过,可奖励20下载分
被举报人:
举报的资源分:
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题,侵犯个人或公司的版权
*详细原因:
VIP下载&&免积分60元/年(1200次)
您可能还需要
开发技术下载排行这种图标和Font Awesome里面的字体有什么区别吗
老师为什么我访问这个图标网址怎么这么慢,很久才加载出来,这种字体图标和Font Awesome里面的图标有什么区别吗?
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
一个字库,479个图标
仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。
无需依赖JavaScript
Font Awesome完全不依赖JavaScript,因此无需担心兼容性。
无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。
如言语一般自由
Font Awesome完全免费,哪怕是商业用途。请查看。
只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。
高分屏完美呈现
Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。
完美兼容其它框架
尽管是为设计,但Font Awesome同样能与其它框架完美协同运作。
可用于桌面系统
用于桌面系统,或需要一套完整的矢量图,请查看。
可适配于屏幕阅读器
与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。
fa-bluetooth (蓝牙)
fa-bluetooth-b
fa-codiepie
fa-credit-card-alt
fa-fort-awesome
fa-hashtag
fa-mixcloud
fa-modx (风车)
fa-pause-circle
fa-pause-circle-o
fa-percent
fa-product-hunt
fa-reddit-alien (天线宝宝)
fa-shopping-bag
fa-shopping-basket (购物袋)
fa-stop-circle
fa-stop-circle-o
fa-anchor (船锚)
fa-archive (档案盒)
fa-area-chart (走势图)
fa-arrows (箭头)
fa-arrows-h (左右箭头)
fa-arrows-v (上下箭头)
fa-asterisk (星号)
fa-automobile (轿车)
fa-balance-scale (天平)
fa-ban (禁止)
fa-bank (银行白宫)
fa-bar-chart (柱状图)
fa-bar-chart-o (别名)
fa-barcode (条形码)
fa-battery-0 (电量0)
fa-battery-1 (电量1)
fa-battery-2 (电量2)
fa-battery-3 (电量3)
fa-battery-4 (电量4)
fa-battery-empty (空电量)
fa-battery-full (满电量)
fa-battery-half (一半电量)
fa-battery-quarter (1/4电量)
fa-battery-three-quarters
fa-bell-slash
fa-bell-slash-o
fa-bicycle
fa-binoculars
fa-birthday-cake
fa-bluetooth
fa-bluetooth-b
fa-bookmark
fa-bookmark-o
fa-briefcase
fa-building
fa-building-o
fa-bullhorn
fa-bullseye
fa-cab (别名)
fa-calculator
fa-calendar
fa-calendar-check-o
fa-calendar-minus-o
fa-calendar-o
fa-calendar-plus-o
fa-calendar-times-o
fa-camera-retro
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-cart-arrow-down
fa-cart-plus
fa-certificate
fa-check-circle
fa-check-circle-o
fa-check-square
fa-check-square-o
fa-circle-o
fa-circle-o-notch
fa-circle-thin
fa-clock-o
fa-close (别名)
fa-cloud-download
fa-cloud-upload
fa-code-fork
fa-comment
fa-comment-o
fa-commenting
fa-commenting-o
fa-comments
fa-comments-o
fa-compass
fa-copyright
fa-creative-commons
fa-credit-card
fa-credit-card-alt
fa-crosshairs
fa-cutlery
fa-dashboard (别名)
fa-database
fa-desktop
fa-diamond
fa-dot-circle-o
fa-download
fa-edit (别名)
fa-ellipsis-h
fa-ellipsis-v
fa-envelope
fa-envelope-o
fa-envelope-square
fa-exchange
fa-exclamation
fa-exclamation-circle
fa-exclamation-triangle
fa-external-link
fa-external-link-square
fa-eye-slash
fa-eyedropper
fa-feed (别名)
fa-fighter-jet
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o (别名)
fa-file-pdf-o
fa-file-photo-o (别名)
fa-file-picture-o (别名)
fa-file-powerpoint-o
fa-file-sound-o (别名)
fa-file-video-o
fa-file-word-o
fa-file-zip-o (别名)
fa-fire-extinguisher
fa-flag-checkered
fa-flash (别名)
fa-folder-o
fa-folder-open
fa-folder-open-o
fa-frown-o
fa-futbol-o
fa-gamepad
fa-gavel(锤子)
fa-gear (单项设置)
fa-gears (多项设置)
fa-gift(礼物)
fa-glass(高脚杯)
fa-globe(地球全球东半球)
fa-graduation-cap(博士学士帽)
fa-group (群组团队)
fa-hand-grab-o (别名)
fa-hand-lizard-o
fa-hand-paper-o
fa-hand-peace-o
fa-hand-pointer-o
fa-hand-rock-o
fa-hand-scissors-o
fa-hand-spock-o
fa-hand-stop-o (别名)
fa-hashtag
fa-hdd-o(盒子)
fa-headphones(耳机)
fa-heart(爱心-实线)
fa-heart-o(爱心-虚线)
fa-heartbeat
fa-history(历史)
fa-home(主页/房子)
fa-hotel (别名)
fa-hourglass
fa-hourglass-1 (别名)
fa-hourglass-2 (别名)
fa-hourglass-3 (别名)
fa-hourglass-end
fa-hourglass-half
fa-hourglass-o
fa-hourglass-start
fa-i-cursor
fa-image (别名)
fa-inbox(抽屉)
fa-industry
fa-info-circle
fa-institution (别名)
fa-keyboard-o
fa-language(语言)
fa-laptop(电脑桌面)
fa-leaf(绿叶叶子)
fa-legal (别名)
fa-lemon-o
fa-level-down
fa-level-up
fa-life-bouy (别名)
fa-life-buoy (别名)
fa-life-ring
fa-life-saver (别名)
fa-lightbulb-o
fa-line-chart
fa-location-arrow
fa-mail-forward (别名)
fa-mail-reply (别名)
fa-mail-reply-all (别名)
fa-map-marker
fa-map-pin
fa-map-signs
fa-microphone
fa-microphone-slash
fa-minus-circle
fa-minus-square
fa-minus-square-o
fa-mobile-phone (别名)
fa-mortar-board (别名)
fa-motorcycle
fa-mouse-pointer
fa-navicon (别名)
fa-newspaper-o (报纸)
fa-object-group
fa-object-ungroup
fa-paint-brush
fa-paper-plane
fa-paper-plane-o
fa-pencil-square
fa-pencil-square-o
fa-percent
fa-phone-square
fa-photo (别名)
fa-picture-o
fa-pie-chart
fa-plus-circle
fa-plus-square
fa-plus-square-o
fa-power-off
fa-puzzle-piece
fa-question
fa-question-circle
fa-quote-left
fa-quote-right
fa-recycle
fa-refresh
fa-registered
fa-remove (别名)
fa-reorder (别名)
fa-reply-all
fa-retweet
fa-rss-square
fa-search-minus
fa-search-plus
fa-send (别名)
fa-send-o (别名)
fa-share-alt
fa-share-alt-square
fa-share-square
fa-share-square-o
fa-shopping-bag
fa-shopping-basket
fa-shopping-cart
fa-sign-in
fa-sign-out
fa-sitemap
fa-sliders
fa-smile-o
fa-soccer-ball-o (别名)
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-space-shuttle
fa-spinner
fa-square-o
fa-star-half
fa-star-half-empty (别名)
fa-star-half-full (别名)
fa-star-half-o
fa-sticky-note
fa-sticky-note-o
fa-street-view
fa-suitcase
fa-support (别名)
fa-tachometer
fa-television
fa-terminal
fa-thumb-tack
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-times-circle
fa-times-circle-o
fa-toggle-down (别名)
fa-toggle-left (别名)
fa-toggle-off
fa-toggle-on
fa-toggle-right (别名)
fa-toggle-up (别名)
fa-trademark
fa-trash-o
fa-tv (别名)
fa-umbrella
fa-university
fa-unlock-alt
fa-unsorted (别名)
fa-user-plus
fa-user-secret
fa-user-times
fa-video-camera
fa-volume-down
fa-volume-off
fa-volume-up
fa-warning (别名)
fa-wheelchair
fa-hand-grab-o (alias)
fa-hand-lizard-o
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-hand-paper-o
fa-hand-peace-o
fa-hand-pointer-o
fa-hand-rock-o
fa-hand-scissors-o
fa-hand-spock-o
fa-hand-stop-o (alias)
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-ambulance
fa-automobile (alias)
fa-bicycle
fa-cab (alias)
fa-fighter-jet
fa-motorcycle
fa-space-shuttle
fa-wheelchair
fa-genderless
fa-intersex (alias)
fa-mars-double
fa-mars-stroke
fa-mars-stroke-h
fa-mars-stroke-v
fa-mercury
fa-transgender
fa-transgender-alt
fa-venus-double
fa-venus-mars
这些图标在fa-spin类的作用下表现优异。您可以查阅.
fa-cc-amex
fa-cc-diners-club
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-credit-card
fa-credit-card-alt
fa-google-wallet
fa-bitcoin (alias)
fa-cny (alias)
fa-dollar (alias)
fa-euro (alias)
fa-gg-circle
fa-rmb (alias)
fa-rouble (alias)
fa-ruble (alias)
fa-rupee (alias)
fa-shekel (alias)
fa-sheqel (alias)
fa-turkish-lira (alias)
fa-won (alias)
fa-yen (alias)
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-arrows-alt
fa-arrows-h
fa-arrows-v
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-exchange
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 (alias)
fa-toggle-left (alias)
fa-toggle-right (alias)
fa-toggle-up (alias)
fa-arrows-alt
fa-backward
fa-compress
fa-fast-backward
fa-fast-forward
fa-forward
fa-pause-circle
fa-pause-circle-o
fa-play-circle
fa-play-circle-o
fa-step-backward
fa-step-forward
fa-stop-circle
fa-stop-circle-o
fa-youtube-play
所有标志图标都分别是其所有者的注册商标。
使用这些商标并不代表Font Awesome拥有它们。
Adblock Plus 插件会通过设置“Remove Social Media Buttons”来移除 Font Awesome 的这些标志图标。
然而我们并不会用一些特殊方法来强行显示。如果您认为这是一个错误,请
在Adblock Plus修复这个问题之前,您需要自行修改这些图标的类名来解决这个问题。
fa-android
fa-angellist
fa-behance
fa-behance-square
fa-bitbucket
fa-bitbucket-square
fa-bitcoin (alias)
fa-black-tie
fa-bluetooth
fa-bluetooth-b
fa-buysellads
fa-cc-amex
fa-cc-diners-club
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-codepen
fa-codiepie
fa-connectdevelop
fa-dashcube
fa-delicious
fa-deviantart
fa-dribbble
fa-dropbox
fa-expeditedssl
fa-facebook
fa-facebook-f (alias)
fa-facebook-official
fa-facebook-square
fa-firefox
fa-fonticons
fa-fort-awesome
fa-forumbee
fa-foursquare
fa-ge (alias)
fa-get-pocket
fa-gg-circle
fa-git-square
fa-github-alt
fa-github-square
fa-gittip (alias)
fa-google-plus
fa-google-plus-square
fa-google-wallet
fa-gratipay
fa-hacker-news
fa-instagram
fa-internet-explorer
fa-ioxhost
fa-jsfiddle
fa-lastfm-square
fa-leanpub
fa-linkedin
fa-linkedin-square
fa-meanpath
fa-mixcloud
fa-odnoklassniki
fa-odnoklassniki-square
fa-opencart
fa-optin-monster
fa-pagelines
fa-pied-piper
fa-pied-piper-alt
fa-pinterest
fa-pinterest-p
fa-pinterest-square
fa-product-hunt
fa-ra (alias)
fa-reddit-alien
fa-reddit-square
fa-share-alt
fa-share-alt-square
fa-shirtsinbulk
fa-simplybuilt
fa-skyatlas
fa-slideshare
fa-soundcloud
fa-spotify
fa-stack-exchange
fa-stack-overflow
fa-steam-square
fa-stumbleupon
fa-stumbleupon-circle
fa-tencent-weibo
fa-tripadvisor
fa-tumblr-square
fa-twitter
fa-twitter-square
fa-viacoin
fa-vimeo-square
fa-wechat (alias)
fa-whatsapp
fa-wikipedia-w
fa-windows
fa-wordpress
fa-xing-square
fa-y-combinator
fa-y-combinator-square (alias)
fa-yc (alias)
fa-yc-square (alias)
fa-youtube
fa-youtube-play
fa-youtube-square
fa-ambulance
fa-h-square
fa-heart-o
fa-heartbeat
fa-hospital-o
fa-plus-square
fa-stethoscope
fa-user-md
fa-wheelchair
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!
将以下代码粘贴到网页HTML代码的 &head& 部分.
&link href="///font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&
当新版本发布时,BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 :)
参考,然后开始使用Font Awesome吧!
如果您使用了默认的Bootstrap CSS样式,那么你可以使用这种方式来引入默认的Font Awesome CSS样式。
复制整个 font-awesome 文件夹到您的项目中。
在HTML的 &head& 中引用font-awesome.min.css。
&link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"&
参考,然后开始使用Font Awesome吧!
可以简单方便的将 Font
Awesome LESS 集成到Rails项目中。由
将下面这行代码加入到应用的Gemfile中:
gem 'font-awesome-less'
然后执行:
或者自行安装:
$ gem install font-awesome-less
可以简单方便的将 Font
Awesome SASS 集成到Rails项目中。由
将下面这行代码加入到应用的Gemfile中:
gem 'font-awesome-sass'
然后执行:
或者自行安装:
$ gem install font-awesome-sass
使用LESS或SASS的方法来自定义 Font Awesome 4.2.0 。
复制 font-awesome/ 目录到您的项目中。
打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ,然后修改 @fa-font-path 或 $fa-font-path
为您的字体目录。
@fa-font-path:
"../font";
字体路径是相对于编译的CSS目录。
如果使用了静态编译器,那么重新编译LESS或SASS文件。如果没有,那么现在应该一切OK了。
参考,然后开始使用Font Awesome吧!
如果需要支持IE7,那真的十分抱歉。Font Awesome从4.1.0版本开始不再支持IE7,
但更早的版本仍然支持。您可以查看
然后呢,您可以去找那个非要支持IE7的人算账 :)
fa-camera-retro
您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。
Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 &i& ,因为它更简洁。
但实际上使用 &span& 才能更加语义化。
&i class="fa fa-camera-retro"&&/i& fa-camera-retro
如果您修改了图标容器的字体大小,图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。
使用 fa-lg (33%递增)、fa-2x、
fa-3x、fa-4x,或者 fa-5x 类 来放大图标。
&i class="fa fa-camera-retro fa-lg"&&/i& fa-lg&i class="fa fa-camera-retro fa-2x"&&/i& fa-2x&i class="fa fa-camera-retro fa-3x"&&/i& fa-3x&i class="fa fa-camera-retro fa-4x"&&/i& fa-4x&i class="fa fa-camera-retro fa-5x"&&/i& fa-5x
如果图标的底部和顶部被截断了,您需要增加行高来解决此问题。
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。
尤其在列表或导航时起到重要作用。
&div class="list-group"&&&&a class="list-group-item" href="#"&&i class="fa fa-home fa-fw"&&/i&& Home&/a&&&&a class="list-group-item" href="#"&&i class="fa fa-book fa-fw"&&/i&& Library&/a&&&&a class="list-group-item" href="#"&&i class="fa fa-pencil fa-fw"&&/i&& Applications&/a&&&&a class="list-group-item" href="#"&&i class="fa fa-cog fa-fw"&&/i&& Settings&/a&&/div&
List icons
can be used
as bullets
使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
&ul class="fa-ul"&&&&li&&i class="fa-li fa fa-check-square"&&/i&List icons&/li&&&&li&&i class="fa-li fa fa-check-square"&&/i&can be used&/li&&&&li&&i class="fa-li fa fa-spinner fa-spin"&&/i&as bullets&/li&&&&li&&i class="fa-li fa fa-square"&&/i&in lists&/li&&/ul&
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。
&i class="fa fa-quote-left fa-3x pull-left fa-border"&&/i&...tomorrow we will run faster, stretch out our arms farther...And then one fine morning— So we beat on, boats against thecurrent, borne back ceaselessly into the past.
使用 fa-spin 类来使任意图标旋转。尤其适合 fa-spinner、
fa-refresh 和 fa-cog 。
&i class="fa fa-spinner fa-spin"&&/i&&i class="fa fa-circle-o-notch fa-spin"&&/i&&i class="fa fa-refresh fa-spin"&&/i&&i class="fa fa-cog fa-spin"&&/i&
CSS3动画不支持IE8-IE9。
& fa-rotate-90
& fa-rotate-180
& fa-rotate-270
& fa-flip-horizontal
& fa-flip-vertical
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
&i class="fa fa-shield"&&/i& normal&br&&i class="fa fa-shield fa-rotate-90"&&/i& fa-rotate-90&br&&i class="fa fa-shield fa-rotate-180"&&/i& fa-rotate-180&br&&i class="fa fa-shield fa-rotate-270"&&/i& fa-rotate-270&br&&i class="fa fa-shield fa-flip-horizontal"&&/i& fa-flip-horizontal&br&&i class="fa fa-shield fa-flip-vertical"&&/i& icon-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
如果想要将多个图标组合起来,使用 fa-stack 类作为父容器, fa-stack-1x 作为正常比例的图标,
fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中
类来控制整体大小。
&span class="fa-stack fa-lg"&&&&i class="fa fa-square-o fa-stack-2x"&&/i&&&&i class="fa fa-twitter fa-stack-1x"&&/i&&/span&fa-twitter on fa-square-o&br&&span class="fa-stack fa-lg"&&&&i class="fa fa-circle fa-stack-2x"&&/i&&&&i class="fa fa-flag fa-stack-1x fa-inverse"&&/i&&/span&fa-flag on fa-circle&br&&span class="fa-stack fa-lg"&&&&i class="fa fa-square fa-stack-2x"&&/i&&&&i class="fa fa-terminal fa-stack-1x fa-inverse"&&/i&&/span&fa-terminal on fa-square&br&&span class="fa-stack fa-lg"&&&&i class="fa fa-camera fa-stack-1x"&&/i&&&&i class="fa fa-ban fa-stack-2x text-danger"&&/i&&/span&fa-ban on fa-camera
Font Awesome 完全兼容 Bootstrap 的所有组件。
&a class="btn btn-danger" href="#"&&&&i class="fa fa-trash-o fa-lg"&&/i& Delete&/a&&a class="btn btn-default btn-sm" href="#"&&&&i class="fa fa-cog"&&/i& Settings&/a&&a class="btn btn-lg btn-success" href="#"&&&&i class="fa fa-flag fa-2x pull-left"&&/i& Font Awesome&br&Version 4.2.0&/a&&div class="btn-group"&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-left"&&/i&&/a&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-center"&&/i&&/a&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-right"&&/i&&/a&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-justify"&&/i&&/a&&/div&&div class="input-group margin-bottom-sm"&&&&span class="input-group-addon"&&i class="fa fa-envelope-o fa-fw"&&/i&&/span&&&&input class="form-control" type="text" placeholder="Email address"&&/div&&div class="input-group"&&&&span class="input-group-addon"&&i class="fa fa-key fa-fw"&&/i&&/span&&&&input class="form-control" type="password" placeholder="Password"&&/div&&div class="btn-group open"&&&&a class="btn btn-primary" href="#"&&i class="fa fa-user fa-fw"&&/i& User&/a&&&&a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&&&&span class="fa fa-caret-down"&&/span&&/a&&&&ul class="dropdown-menu"&&&&&&li&&a href="#"&&i class="fa fa-pencil fa-fw"&&/i& Edit&/a&&/li&&&&&&li&&a href="#"&&i class="fa fa-trash-o fa-fw"&&/i& Delete&/a&&/li&&&&&&li&&a href="#"&&i class="fa fa-ban fa-fw"&&/i& Ban&/a&&/li&&&&&&li class="divider"&&/li&&&&&&li&&a href="#"&&i class="i"&&/i& Make admin&/a&&/li&&&&/ul&&/div&
您可以任意自定义修改 Font Awesome 的CSS样式表来实现您想要的效果。
星级评定(受
使用Font Awesome的过程中遇到困难了?亦或碰到一个您认为没有正确显示的问题?很抱歉我没有时间来一一回复大家的邮件。
不过以下方式可能对您的情况有所帮助:
您可以阅读最新版本的怎样.
它将用最简单的方式告诉您怎样使用Font Awesome。
查阅Stack Overflow上 。其他人或许也有与您相同的问题。
在Stack Overflow上也找不到问题的答案?
那么可以,然后
,我或许有时间会看一看。
找到Font Awesome的Bug了?那么请直接在GitHub项目中报告就是了。不过请注意以下几点:
请表现得友好一些。Font Awesome是一个有爱的地方:)
一下,也许这个Bug已经有人提交过了。
在提交任何问题之前,请先阅读由
如果以上几点都OK了,那么请
新图标几乎都是在
中提出需求的。
如果您也需要,那么这里有一些注意事项需要看看:
请表现得友好一些。Font Awesome是一个有爱的地方;)
一下,也许您想增加的图标已经有人提交过了。
请在提出需求时注意以下几点,万分感激:
Icon request: 图标名称.
举例说明一下您需要在哪些地方用到这个图标,怎么用?
提交一两张单色图片,并确保这张图片能表达您所想要的内容。
具象化的对象将会诞生出优质的图标,而抽象的概念当然只能用抽象的内容来表现。
举个栗子,一个来表现幸福感的图标远不如一个笑脸图标好制作,也不够直接。
您有解决Font Awesome中Bug的方法?或者您希望为它增添新的特性?非常感谢,但是也需要请您注意几点:
请不要提交任何新图标。
Please submit all pull requests against *-wip branches.
All pull requests submitted against master will be sumarily closed and this guide referenced.
After doing everything above, feel free to
Want to keep up with what's planned for Font Awesome? Check out our
on the GitHub project.
适用于在以下目录下的所有桌面和webfont文件:
font-awesome/fonts/.
License: SIL OFL 1.1
适用于在以下目录下的所有CSS和LESS文件:
font-awesome/css/、
font-awesome/less/ 以及
font-awesome/scss/。
License: MIT License
适用于所有Font Awesome项目中不受字体和代码许可约束的文件。
License: CC BY 3.0
所有标志图标都分别是其所有者的注册商标。
使用这些商标并不代表Font Awesome拥有它们。Font Awesome,一套绝佳的图标字体库和CSS框架
Font Awesome
一套绝佳的图标字体库和CSS框架
Version 4.5.0 &&&&&
Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
一个字库,585个图标
仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。
无需依赖JavaScript
Font Awesome完全不依赖JavaScript,因此无需担心兼容性。
无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。
如言语一般自由
Font Awesome完全免费,哪怕是商业用途。请查看。
只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。
高分屏完美呈现
Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。
完美兼容其它框架
尽管是为设计,但Font Awesome同样能与其它框架完美协同运作。
可用于桌面系统
用于桌面系统,或需要一套完整的矢量图,请查看。
可适配于屏幕阅读器
与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。
分享给朋友
这些图标在fa-spin类的作用下表现优异。您可以查阅
所有标志图标都分别是其所有者的注册商标。
使用这些商标并不代表Font Awesome拥有它们。
Adblock Plus 插件会通过设置“Remove Social Media Buttons”来移除 Font Awesome 的这些标志图标。
然而我们并不会用一些特殊方法来强行显示。如果您认为这是一个错误,请
在Adblock Plus修复这个问题之前,您需要自行修改这些图标的类名来解决这个问题。
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!
将以下代码粘贴到网页HTML代码的 &head& 部分.
&link href="///font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"&
当新版本发布时,BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 :)
参考,然后开始使用Font Awesome吧!
如果您使用了默认的Bootstrap CSS样式,那么你可以使用这种方式来引入默认的Font Awesome CSS样式。
复制整个 font-awesome 文件夹到您的项目中。
在HTML的 &head& 中引用font-awesome.min.css。
&link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"&
参考,然后开始使用Font Awesome吧!
可以简单方便的将 Font
Awesome LESS 集成到Rails项目中。由
将下面这行代码加入到应用的Gemfile中:
gem 'font-awesome-less'
然后执行:
或者自行安装:
$ gem install font-awesome-less
可以简单方便的将 Font
Awesome SASS 集成到Rails项目中。由
将下面这行代码加入到应用的Gemfile中:
gem 'font-awesome-sass'
然后执行:
或者自行安装:
$ gem install font-awesome-sass
使用LESS或SASS的方法来自定义 Font Awesome 4.5.0 。
复制 font-awesome/ 目录到您的项目中。
打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ,然后修改 @fa-font-path 或 $fa-font-path
为您的字体目录。
@fa-font-path:
"../font";
字体路径是相对于编译的CSS目录。
如果使用了静态编译器,那么重新编译LESS或SASS文件。如果没有,那么现在应该一切OK了。
参考,然后开始使用Font Awesome吧!
如果需要支持IE7,那真的十分抱歉。Font Awesome从4.1.0版本开始不再支持IE7,
但更早的版本仍然支持。您可以查看
然后呢,您可以去找那个非要支持IE7的人算账 :)
fa-camera-retro
您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。
Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 &i& ,因为它更简洁。
但实际上使用 &span& 才能更加语义化。
&i class="fa fa-camera-retro"&&/i& fa-camera-retro
如果您修改了图标容器的字体大小,图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。
使用 fa-lg (33%递增)、fa-2x、
fa-3x、fa-4x,或者 fa-5x 类 来放大图标。
&i class="fa fa-camera-retro fa-lg"&&/i& fa-lg&i class="fa fa-camera-retro fa-2x"&&/i& fa-2x&i class="fa fa-camera-retro fa-3x"&&/i& fa-3x&i class="fa fa-camera-retro fa-4x"&&/i& fa-4x&i class="fa fa-camera-retro fa-5x"&&/i& fa-5x
如果图标的底部和顶部被截断了,您需要增加行高来解决此问题。
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。
尤其在列表或导航时起到重要作用。
&div class="list-group"&&&&a class="list-group-item" href="#"&&i class="fa fa-home fa-fw"&&/i&& Home&/a&&&&a class="list-group-item" href="#"&&i class="fa fa-book fa-fw"&&/i&& Library&/a&&&&a class="list-group-item" href="#"&&i class="fa fa-pencil fa-fw"&&/i&& Applications&/a&&&&a class="list-group-item" href="#"&&i class="fa fa-cog fa-fw"&&/i&& Settings&/a&&/div&
List icons
can be used
as bullets
使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
&ul class="fa-ul"&&&&li&&i class="fa-li fa fa-check-square"&&/i&List icons&/li&&&&li&&i class="fa-li fa fa-check-square"&&/i&can be used&/li&&&&li&&i class="fa-li fa fa-spinner fa-spin"&&/i&as bullets&/li&&&&li&&i class="fa-li fa fa-square"&&/i&in lists&/li&&/ul&
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。
&i class="fa fa-quote-left fa-3x pull-left fa-border"&&/i&...tomorrow we will run faster, stretch out our arms farther...And then one fine morning— So we beat on, boats against thecurrent, borne back ceaselessly into the past.
使用 fa-spin 类来使任意图标旋转,现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。
&i class="fa fa-spinner fa-spin"&&/i&
&i class="fa fa-circle-o-notch fa-spin"&&/i&
&i class="fa fa-refresh fa-spin"&&/i&
&i class="fa fa-cog fa-spin"&&/i&
&i class="fa fa-spinner fa-pulse"&&/i&
CSS3动画不支持IE8-IE9。
& fa-rotate-90
& fa-rotate-180
& fa-rotate-270
& fa-flip-horizontal
& fa-flip-vertical
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
&i class="fa fa-shield"&&/i& normal&br&&i class="fa fa-shield fa-rotate-90"&&/i& fa-rotate-90&br&&i class="fa fa-shield fa-rotate-180"&&/i& fa-rotate-180&br&&i class="fa fa-shield fa-rotate-270"&&/i& fa-rotate-270&br&&i class="fa fa-shield fa-flip-horizontal"&&/i& fa-flip-horizontal&br&&i class="fa fa-shield fa-flip-vertical"&&/i& icon-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
如果想要将多个图标组合起来,使用 fa-stack 类作为父容器, fa-stack-1x 作为正常比例的图标,
fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中
类来控制整体大小。
&span class="fa-stack fa-lg"&&&&i class="fa fa-square-o fa-stack-2x"&&/i&&&&i class="fa fa-twitter fa-stack-1x"&&/i&&/span&fa-twitter on fa-square-o&br&&span class="fa-stack fa-lg"&&&&i class="fa fa-circle fa-stack-2x"&&/i&&&&i class="fa fa-flag fa-stack-1x fa-inverse"&&/i&&/span&fa-flag on fa-circle&br&&span class="fa-stack fa-lg"&&&&i class="fa fa-square fa-stack-2x"&&/i&&&&i class="fa fa-terminal fa-stack-1x fa-inverse"&&/i&&/span&fa-terminal on fa-square&br&&span class="fa-stack fa-lg"&&&&i class="fa fa-camera fa-stack-1x"&&/i&&&&i class="fa fa-ban fa-stack-2x text-danger"&&/i&&/span&fa-ban on fa-camera
Font Awesome 完全兼容 Bootstrap 的所有组件。
&a class="btn btn-danger" href="#"&&&&i class="fa fa-trash-o fa-lg"&&/i& Delete&/a&&a class="btn btn-default btn-sm" href="#"&&&&i class="fa fa-cog"&&/i& Settings&/a&&a class="btn btn-lg btn-success" href="#"&&&&i class="fa fa-flag fa-2x pull-left"&&/i& Font Awesome&br&Version 4.5.0&/a&&div class="btn-group"&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-left"&&/i&&/a&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-center"&&/i&&/a&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-right"&&/i&&/a&&&&a class="btn btn-default" href="#"&&i class="fa fa-align-justify"&&/i&&/a&&/div&&div class="input-group margin-bottom-sm"&&&&span class="input-group-addon"&&i class="fa fa-envelope-o fa-fw"&&/i&&/span&&&&input class="form-control" type="text" placeholder="Email address"&&/div&&div class="input-group"&&&&span class="input-group-addon"&&i class="fa fa-key fa-fw"&&/i&&/span&&&&input class="form-control" type="password" placeholder="Password"&&/div&&div class="btn-group open"&&&&a class="btn btn-primary" href="#"&&i class="fa fa-user fa-fw"&&/i& User&/a&&&&a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&&&&span class="fa fa-caret-down"&&/span&&/a&&&&ul class="dropdown-menu"&&&&&&li&&a href="#"&&i class="fa fa-pencil fa-fw"&&/i& Edit&/a&&/li&&&&&&li&&a href="#"&&i class="fa fa-trash-o fa-fw"&&/i& Delete&/a&&/li&&&&&&li&&a href="#"&&i class="fa fa-ban fa-fw"&&/i& Ban&/a&&/li&&&&&&li class="divider"&&/li&&&&&&li&&a href="#"&&i class="i"&&/i& Make admin&/a&&/li&&&&/ul&&/div&
您可以任意自定义修改 Font Awesome 的CSS样式表来实现您想要的效果。
星级评定(受
使用Font Awesome的过程中遇到困难了?亦或碰到一个您认为没有正确显示的问题?很抱歉我没有时间来一一回复大家的邮件。
不过以下方式可能对您的情况有所帮助:
您可以阅读最新版本的怎样.
它将用最简单的方式告诉您怎样使用Font Awesome。
查阅Stack Overflow上 。其他人或许也有与您相同的问题。
在Stack Overflow上也找不到问题的答案?
那么可以,然后
,我或许有时间会看一看。
找到Font Awesome的Bug了?那么请直接在GitHub项目中报告就是了。不过请注意以下几点:
请表现得友好一些。Font Awesome是一个有爱的地方:)
一下,也许这个Bug已经有人提交过了。
在提交任何问题之前,请先阅读由
如果以上几点都OK了,那么请
新图标几乎都是在
中提出需求的。
如果您也需要,那么这里有一些注意事项需要看看:
请表现得友好一些。Font Awesome是一个有爱的地方;)
一下,也许您想增加的图标已经有人提交过了。
请在提出需求时注意以下几点,万分感激:
Icon request: 图标名称.
举例说明一下您需要在哪些地方用到这个图标,怎么用?
提交一两张单色图片,并确保这张图片能表达您所想要的内容。
具象化的对象将会诞生出优质的图标,而抽象的概念当然只能用抽象的内容来表现。
举个栗子,一个来表现幸福感的图标远不如一个笑脸图标好制作,也不够直接。
您有解决Font Awesome中Bug的方法?或者您希望为它增添新的特性?非常感谢,但是也需要请您注意几点:
请不要提交任何新图标。
Please submit all pull requests against *-wip branches.
All pull requests submitted against master will be sumarily closed and this guide referenced.
After doing everything above, feel free to
Want to keep up with what's planned for Font Awesome? Check out our
on the GitHub project.
适用于在以下目录下的所有桌面和webfont文件:
font-awesome/fonts/.
License: SIL OFL 1.1
适用于在以下目录下的所有CSS和LESS文件:
font-awesome/css/、
font-awesome/less/ 以及
font-awesome/scss/。
License: MIT License
适用于所有Font Awesome项目中不受字体和代码许可约束的文件。
License: CC BY 3.0
所有标志图标都分别是其所有者的注册商标。
使用这些商标并不代表Font Awesome拥有它们。
图标设计的核查、建议、一些专业帮助,以及自始自终的陪伴。
对于Font Awesome的
中有关提交请求与意见建议的出色管理。

我要回帖

更多关于 font awesome图标叠加 的文章

 

随机推荐