& The Icons
最新的4.7.0版，收录了675个图标&
点击订阅 && 第一时间获取最新版本
Note: These icons work great with the fa-spin class. Check out the
Warning! Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please
if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
Brand icons should only be used to represent the company or product to which they refer.
Please do not use brand logos for any purpose except to represent that particular brand or service.祝给予赞赏的伙伴，2017年发大财！|赞赏4人打赏
收藏已收藏 | 51赞 | 14
分享到微信扫码分享到微信
为逻辑和艺术的结合而疯
2 万阅读总量
热门问题12345678910直接在 CSS 中引用 FONTAWESOME 图标 - 幻杀博客
Magic to kill the blog
小幻心情：『邮箱伪造服正式回复咯！不过网站备案掉了，访问速度蜜汁降低』 小幻说说：『Loading...』
当前位置： & 、 & 正文
CSS类编码CSS类编码.fa-glass\f000.fa-github-alt\f113.fa-music\f001.fa-folder-o\f114.fa-search\f002.fa-folder-open-o\f115.fa-envelope-o\f003.fa-smile-o\f118.fa-heart\f004.fa-frown-o\f119.fa-star\f005.fa-meh-o\f11a.fa-star-o\f006.fa-gamepad\f11b.fa-user\f007.fa-keyboard-o\f11c.fa-film\f008.fa-flag-o\f11d.fa-th-large\f009.fa-flag-checkered\f11e.fa-th\f00a.fa-terminal\f120.fa-th-list\f00b.fa-code\f121.fa-check\f00c.fa-mail-reply-all\f122.fa-remove\f00d.fa-reply-all\f122.fa-close\f00d.fa-star-half-empty\f123.fa-times\f00d.fa-star-half-full\f123.fa-search-plus\f00e.fa-star-half-o\f123.fa-search-minus\f010.fa-location-arrow\f124.fa-power-off\f011.fa-crop\f125.fa-signal\f012.fa-code-fork\f126.fa-gear\f013.fa-unlink\f127.fa-cog\f013.fa-chain-broken\f127.fa-trash-o\f014.fa-question\f128.fa-home\f015.fa-info\f129.fa-file-o\f016.fa-exclamation\f12a.fa-clock-o\f017.fa-superscript\f12b.fa-road\f018.fa-subscript\f12c.fa-download\f019.fa-eraser\f12d.fa-arrow-circle-o-down\f01a.fa-puzzle-piece\f12e.fa-arrow-circle-o-up\f01b.fa-microphone\f130.fa-inbox\f01c.fa-microphone-slash\f131.fa-play-circle-o\f01d.fa-shield\f132.fa-rotate-right\f01e.fa-calendar-o\f133.fa-repeat\f01e.fa-fire-extinguisher\f134.fa-refresh\f021.fa-rocket\f135.fa-list-alt\f022.fa-maxcdn\f136.fa-lock\f023.fa-chevron-circle-left\f137.fa-flag\f024.fa-chevron-circle-right\f138.fa-headphones\f025.fa-chevron-circle-up\f139.fa-volume-off\f026.fa-chevron-circle-down\f13a.fa-volume-down\f027.fa-html5\f13b.fa-volume-up\f028.fa-css3\f13c.fa-qrcode\f029.fa-anchor\f13d.fa-barcode\f02a.fa-unlock-alt\f13e.fa-tag\f02b.fa-bullseye\f140.fa-tags\f02c.fa-ellipsis-h\f141.fa-book\f02d.fa-ellipsis-v\f142.fa-bookmark\f02e.fa-rss-square\f143.fa-print\f02f.fa-play-circle\f144.fa-camera\f030.fa-ticket\f145.fa-font\f031.fa-minus-square\f146.fa-bold\f032.fa-minus-square-o\f147.fa-italic\f033.fa-level-up\f148.fa-text-height\f034.fa-level-down\f149.fa-text-width\f035.fa-check-square\f14a.fa-align-left\f036.fa-pencil-square\f14b.fa-align-center\f037.fa-external-link-square\f14c.fa-align-right\f038.fa-share-square\f14d.fa-align-justify\f039.fa-compass\f14e.fa-list\f03a.fa-toggle-down\f150.fa-dedent\f03b.fa-caret-square-o-down\f150.fa-outdent\f03b.fa-toggle-up\f151.fa-indent\f03c.fa-caret-square-o-up\f151.fa-video-camera\f03d.fa-toggle-right\f152.fa-photo\f03e.fa-caret-square-o-right\f152.fa-image\f03e.fa-euro\f153.fa-picture-o\f03e.fa-eur\f153.fa-pencil\f040.fa-gbp\f154.fa-map-marker\f041.fa-dollar\f155.fa-adjust\f042.fa-usd\f155.fa-tint\f043.fa-rupee\f156.fa-edit\f044.fa-inr\f156.fa-pencil-square-o\f044.fa-cny\f157.fa-share-square-o\f045.fa-rmb\f157.fa-check-square-o\f046.fa-yen\f157.fa-arrows\f047.fa-jpy\f157.fa-step-backward\f048.fa-ruble\f158.fa-fast-backward\f049.fa-rouble\f158.fa-backward\f04a.fa-rub\f158.fa-play\f04b.fa-won\f159.fa-pause\f04c.fa-krw\f159.fa-stop\f04d.fa-bitcoin\f15a.fa-forward\f04e.fa-btc\f15a.fa-fast-forward\f050.fa-file\f15b.fa-step-forward\f051.fa-file-text\f15c.fa-eject\f052.fa-sort-alpha-asc\f15d.fa-chevron-left\f053.fa-sort-alpha-desc\f15e.fa-chevron-right\f054.fa-sort-amount-asc\f160.fa-plus-circle\f055.fa-sort-amount-desc\f161.fa-minus-circle\f056.fa-sort-numeric-asc\f162.fa-times-circle\f057.fa-sort-numeric-desc\f163.fa-check-circle\f058.fa-thumbs-up\f164.fa-question-circle\f059.fa-thumbs-down\f165.fa-info-circle\f05a.fa-youtube-square\f166.fa-crosshairs\f05b.fa-youtube\f167.fa-times-circle-o\f05c.fa-xing\f168.fa-check-circle-o\f05d.fa-xing-square\f169.fa-ban\f05e.fa-youtube-play\f16a.fa-arrow-left\f060.fa-dropbox\f16b.fa-arrow-right\f061.fa-stack-overflow\f16c.fa-arrow-up\f062.fa-instagram\f16d.fa-arrow-down\f063.fa-flickr\f16e.fa-mail-forward\f064.fa-adn\f170.fa-share\f064.fa-bitbucket\f171.fa-expand\f065.fa-bitbucket-square\f172.fa-compress\f066.fa-tumblr\f173.fa-plus\f067.fa-tumblr-square\f174.fa-minus\f068.fa-long-arrow-down\f175.fa-asterisk\f069.fa-long-arrow-up\f176.fa-exclamation-circle\f06a.fa-long-arrow-left\f177.fa-gift\f06b.fa-long-arrow-right\f178.fa-leaf\f06c.fa-apple\f179.fa-fire\f06d.fa-windows\f17a.fa-eye\f06e.fa-android\f17b.fa-eye-slash\f070.fa-linux\f17c.fa-warning\f071.fa-dribbble\f17d.fa-exclamation-triangle\f071.fa-skype\f17e.fa-plane\f072.fa-foursquare\f180.fa-calendar\f073.fa-trello\f181.fa-random\f074.fa-female\f182.fa-comment\f075.fa-male\f183.fa-magnet\f076.fa-gittip\f184.fa-chevron-up\f077.fa-sun-o\f185.fa-chevron-down\f078.fa-moon-o\f186.fa-retweet\f079.fa-archive\f187.fa-shopping-cart\f07a.fa-bug\f188.fa-folder\f07b.fa-vk\f189.fa-folder-open\f07c.fa-weibo\f18a.fa-arrows-v\f07d.fa-renren\f18b.fa-arrows-h\f07e.fa-pagelines\f18c.fa-bar-chart-o\f080.fa-stack-exchange\f18d.fa-bar-chart\f080.fa-arrow-circle-o-right\f18e.fa-twitter-square\f081.fa-arrow-circle-o-left\f190.fa-facebook-square\f082.fa-toggle-left\f191.fa-camera-retro\f083.fa-caret-square-o-left\f191.fa-key\f084.fa-dot-circle-o\f192.fa-gears\f085.fa-wheelchair\f193.fa-cogs\f085.fa-vimeo-square\f194.fa-comments\f086.fa-turkish-lira\f195.fa-thumbs-o-up\f087.fa-try\f195.fa-thumbs-o-down\f088.fa-plus-square-o\f196.fa-star-half\f089.fa-space-shuttle\f197.fa-heart-o\f08a.fa-slack\f198.fa-sign-out\f08b.fa-envelope-square\f199.fa-linkedin-square\f08c.fa-wordpress\f19a.fa-thumb-tack\f08d.fa-openid\f19b.fa-external-link\f08e.fa-institution\f19c.fa-sign-in\f090.fa-bank\f19c.fa-trophy\f091.fa-university\f19c.fa-github-square\f092.fa-mortar-board\f19d.fa-upload\f093.fa-graduation-cap\f19d.fa-lemon-o\f094.fa-yahoo\f19e.fa-phone\f095.fa-google\f1a0.fa-square-o\f096.fa-reddit\f1a1.fa-bookmark-o\f097.fa-reddit-square\f1a2.fa-phone-square\f098.fa-stumbleupon-circle\f1a3.fa-twitter\f099.fa-stumbleupon\f1a4.fa-facebook\f09a.fa-delicious\f1a5.fa-github\f09b.fa-digg\f1a6.fa-unlock\f09c.fa-pied-piper\f1a7.fa-credit-card\f09d.fa-pied-piper-alt\f1a8.fa-rss\f09e.fa-drupal\f1a9.fa-hdd-o\f0a0.fa-joomla\f1aa.fa-bullhorn\f0a1.fa-language\f1ab.fa-bell\f0f3.fa-fax\f1ac.fa-certificate\f0a3.fa-building\f1ad.fa-hand-o-right\f0a4.fa-child\f1ae.fa-hand-o-left\f0a5.fa-paw\f1b0.fa-hand-o-up\f0a6.fa-spoon\f1b1.fa-hand-o-down\f0a7.fa-cube\f1b2.fa-arrow-circle-left\f0a8.fa-cubes\f1b3.fa-arrow-circle-right\f0a9.fa-behance\f1b4.fa-arrow-circle-up\f0aa.fa-behance-square\f1b5.fa-arrow-circle-down\f0ab.fa-steam\f1b6.fa-globe\f0ac.fa-steam-square\f1b7.fa-wrench\f0ad.fa-recycle\f1b8.fa-tasks\f0ae.fa-automobile\f1b9.fa-filter\f0b0.fa-car\f1b9.fa-briefcase\f0b1.fa-cab\f1ba.fa-arrows-alt\f0b2.fa-taxi\f1ba.fa-group\f0c0.fa-tree\f1bb.fa-users\f0c0.fa-spotify\f1bc.fa-chain\f0c1.fa-deviantart\f1bd.fa-link\f0c1.fa-soundcloud\f1be.fa-cloud\f0c2.fa-database\f1c0.fa-flask\f0c3.fa-file-pdf-o\f1c1.fa-cut\f0c4.fa-file-word-o\f1c2.fa-scissors\f0c4.fa-file-excel-o\f1c3.fa-copy\f0c5.fa-file-powerpoint-o\f1c4.fa-files-o\f0c5.fa-file-photo-o\f1c5.fa-paperclip\f0c6.fa-file-picture-o\f1c5.fa-save\f0c7.fa-file-image-o\f1c5.fa-floppy-o\f0c7.fa-file-zip-o\f1c6.fa-square\f0c8.fa-file-archive-o\f1c6.fa-navicon\f0c9.fa-file-sound-o\f1c7.fa-reorder\f0c9.fa-file-audio-o\f1c7.fa-bars\f0c9.fa-file-movie-o\f1c8.fa-list-ul\f0ca.fa-file-video-o\f1c8.fa-list-ol\f0cb.fa-file-code-o\f1c9.fa-strikethrough\f0cc.fa-vine\f1ca.fa-underline\f0cd.fa-codepen\f1cb.fa-table\f0ce.fa-jsfiddle\f1cc.fa-magic\f0d0.fa-life-bouy\f1cd.fa-truck\f0d1.fa-life-buoy\f1cd.fa-pinterest\f0d2.fa-life-saver\f1cd.fa-pinterest-square\f0d3.fa-support\f1cd.fa-google-plus-square\f0d4.fa-life-ring\f1cd.fa-google-plus\f0d5.fa-circle-o-notch\f1ce.fa-money\f0d6.fa-ra\f1d0.fa-caret-down\f0d7.fa-rebel\f1d0.fa-caret-up\f0d8.fa-ge\f1d1.fa-caret-left\f0d9.fa-empire\f1d1.fa-caret-right\f0da.fa-git-square\f1d2.fa-columns\f0db.fa-git\f1d3.fa-unsorted\f0dc.fa-hacker-news\f1d4.fa-sort\f0dc.fa-tencent-weibo\f1d5.fa-sort-down\f0dd.fa-qq\f1d6.fa-sort-desc\f0dd.fa-wechat\f1d7.fa-sort-up\f0de.fa-weixin\f1d7.fa-sort-asc\f0de.fa-send\f1d8.fa-envelope\f0e0.fa-paper-plane\f1d8.fa-linkedin\f0e1.fa-send-o\f1d9.fa-rotate-left\f0e2.fa-paper-plane-o\f1d9.fa-undo\f0e2.fa-history\f1da.fa-legal\f0e3.fa-circle-thin\f1db.fa-gavel\f0e3.fa-header\f1dc.fa-dashboard\f0e4.fa-paragraph\f1dd.fa-tachometer\f0e4.fa-sliders\f1de.fa-comment-o\f0e5.fa-share-alt\f1e0.fa-comments-o\f0e6.fa-share-alt-square\f1e1.fa-flash\f0e7.fa-bomb\f1e2.fa-bolt\f0e7.fa-soccer-ball-o\f1e3.fa-sitemap\f0e8.fa-futbol-o\f1e3.fa-umbrella\f0e9.fa-tty\f1e4.fa-paste\f0ea.fa-binoculars\f1e5.fa-clipboard\f0ea.fa-plug\f1e6.fa-lightbulb-o\f0eb.fa-slideshare\f1e7.fa-exchange\f0ec.fa-twitch\f1e8.fa-cloud-download\f0ed.fa-yelp\f1e9.fa-cloud-upload\f0ee.fa-newspaper-o\f1ea.fa-user-md\f0f0.fa-wifi\f1eb.fa-stethoscope\f0f1.fa-calculator\f1ec.fa-suitcase\f0f2.fa-paypal\f1ed.fa-bell-o\f0a2.fa-google-wallet\f1ee.fa-coffee\f0f4.fa-cc-visa\f1f0.fa-cutlery\f0f5.fa-cc-mastercard\f1f1.fa-file-text-o\f0f6.fa-cc-discover\f1f2.fa-building-o\f0f7.fa-cc-amex\f1f3.fa-hospital-o\f0f8.fa-cc-paypal\f1f4.fa-ambulance\f0f9.fa-cc-stripe\f1f5.fa-medkit\f0fa.fa-bell-slash\f1f6.fa-fighter-jet\f0fb.fa-bell-slash-o\f1f7.fa-beer\f0fc.fa-trash\f1f8.fa-h-square\f0fd.fa-copyright\f1f9.fa-plus-square\f0fe.fa-at\f1fa.fa-angle-double-left\f100.fa-eyedropper\f1fb.fa-angle-double-right\f101.fa-paint-brush\f1fc.fa-angle-double-up\f102.fa-birthday-cake\f1fd.fa-angle-double-down\f103.fa-area-chart\f1fe.fa-angle-left\f104.fa-pie-chart\f200.fa-angle-right\f105.fa-line-chart\f201.fa-angle-up\f106.fa-lastfm\f202.fa-angle-down\f107.fa-lastfm-square\f203.fa-desktop\f108.fa-toggle-off\f204.fa-laptop\f109.fa-toggle-on\f205.fa-tablet\f10a.fa-bicycle\f206.fa-mobile-phone\f10b.fa-bus\f207.fa-mobile\f10b.fa-ioxhost\f208.fa-circle-o\f10c.fa-angellist\f209.fa-quote-left\f10d.fa-cc\f20a.fa-quote-right\f10e.fa-shekel\f20b.fa-spinner\f110.fa-sheqel\f20b.fa-circle\f111.fa-ils\f20b.fa-mail-reply\f112.fa-meanpath\f20c.fa-reply\f112 分页阅读：
本文固定链接：
上一篇： 下一篇：
文章总数：471篇 评论总数：9092条 页面总数：6 个 分类总数：10个 标签总数：395个 网站运行：1115天 数据查询：73次 加载耗时：0.555秒
- Powered by
- Theme by CreeKoo - Modified by
站点托管于马云他家的ECS - 香港、美国VPS提供反向代理 -
- 赣ICP备号-4
加载中……还没有任何记录...
阿里字体图标库介绍及图标字体的使用方法
作者： 懒人建站
先来看个图标库页面截图 阿里字体图标库介绍及图标字体的使用方法，很多前端或者网页爱好者可能早就用过字体图标，2016年了网页中使用图标字体如果你还没听说过或者很陌生，那你
阿里字体图标库介绍及图标字体的使用方法，很多前端或者网页爱好者可能早就用过字体图标，2016年了网页中使用图标字体如果你还没听说过或者很陌生，那你就要赶快看看这篇阿里字体图标库使用介绍了。
这篇文章只讲阿里字体图标库的使用，暂不讲图标制作，阿里矢量图标库上的字体图标已经很多了，几乎项目中需要的图标大部分都能找到。
字体图标的好处：字体图标是矢量的，可以无限放大不模糊，可以通过改变字体颜色color来改变图标颜色，再也不用做图片雪碧图了，换图标的话，如果保持名字和编码不变的话，就不用更改css或者类名，有这几个好处就有足够的理由来使用字体图标库了
先来看个图标库页面截图
步骤一、阿里图标库的网址：&进入首页，选择微博账号登录
步骤二、点击上的&图标库&选择图标库，然后选择自己看中的图标
步骤三、点击看中的图标以后，图标会被收入到右上角你账号的右边盒子里
步骤四、点开盒子，选择存储为新项目还是老项目中去，保存完以后会直接进入到第五步
步骤五、从顶部导航上的图标管理，可以进入自己的图标项目页面，
步骤六、在图标项目页面，可以编辑你的图标
主要是编辑图标占这个区域的大小范围，移动图标等，图标的名字特别重要，一定要给字体图标起个好名字，要不然一个烂的名字，出现在你的网页中，如果你有强迫症的话会很郁闷的。
步骤七、可以下载图标，也可以引用在线图标
我还是喜欢下载过来，一般情况下，图标字体是不能跨域使用的，一定要跨域是需要做些配置，暂且不提。
步骤八、那就是如何在网页中使用了，
第一步：使用font-face声明字体
@font-face {font-family: 'iconfont'
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
第二步：定义使用iconfont的样式
.iconfont{
font-family:&iconfont& !
font-size:16font-style:
-webkit-font-smoothing:
-webkit-text-stroke-width: 0.2
-moz-osx-font-smoothing:}
第三步：挑选相应图标并获取字体编码，应用于页面
&i class=&iconfont&&3&/i&
如果不能直观的知道字体图标啥样子了，就打开字体包中的demo.html看一看，你要登录阿里字体库网站项目中查看也可以。
注意：谷歌浏览器不能直接打开demo.html查看到字体图标，需要在服务器环境下才可以，我用的webStorm在预览html的时候，就类似于一个web服务器
本文链接：/html+css/htmlcssjq/ali_iconfont.html
阿里字体图标库介绍及图标字体的使用方法由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
(责任编辑：懒人建站)
阿里字体图标库介绍及图标字体的使用方法-相关文章
来自百度的搜索推荐本站于日正式上线，欢迎您的访问。
> FontAwesome图标和charts图表元件库
官方提供的两个非常棒的元件库。
FontAwesome图标元件库
charts图表元件库
下载链接： 密码：wy0q
转载请注明： &}