记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

Font Awesome content代码汇总,共246个

作者:Kaka    时间:2016-11-22 14:57:21    浏览:    评论:0

网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示:

.offsite:after {
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
margin:0px 0px 0px 3px;
text-decoration:none;
color:#c7c8c9;
content:"\f08e"
}

代码 \f08e 是一个超链接的箭头图标。

本文列举几百个常见图标的 content 代码,以供使用。

  • icon-glass (\f000;)
  • icon-music (\f001;)
  • icon-search (\f002;)
  • icon-envelope (\f003;)
  • icon-heart (\f004;)
  • icon-star (\f005;)
  • icon-star-empty (\f006;)
  • icon-user (\f007;)
  • icon-film (\f008;)
  • icon-th-large (\f009;)
  • icon-th (\f00a;)
  • icon-th-list (\f00b;)
  • icon-ok (\f00c;)
  • icon-remove (\f00d;)
  • icon-zoom-in (\f00e;)
  • icon-zoom-out (\f010;)
  • icon-off (\f011;)
  • icon-signal (\f012;)
  • icon-cog (\f013;)
  • icon-trash (\f014;)
  • icon-home (\f015;)
  • icon-file (\f016;)
  • icon-time (\f017;)
  • icon-road (\f018;)
  • icon-download-alt (\f019;)
  • icon-download (\f01a;)
  • icon-upload (\f01b;)
  • icon-inbox (\f01c;)
  • icon-play-circle (\f01d;)
  • icon-repeat (\f01e;)
  • icon-refresh (\f021;)
  • icon-list-alt (\f022;)
  • icon-lock (\f023;)
  • icon-flag (\f024;)
  • icon-headphones (\f025;)
  • icon-volume-off (\f026;)
  • icon-volume-down (\f027;)
  • icon-volume-up (\f028;)
  • icon-qrcode (\f029;)
  • icon-barcode (\f02a;)
  • icon-tag (\f02b;)
  • icon-tags (\f02c;)
  • icon-book (\f02d;)
  • icon-bookmark (\f02e;)
  • icon-print (\f02f;)
  • icon-camera (\f030;)
  • icon-font (\f031;)
  • icon-bold (\f032;)
  • icon-italic (\f033;)
  • icon-text-height (\f034;)
  • icon-text-width (\f035;)
  • icon-align-left (\f036;)
  • icon-align-center (\f037;)
  • icon-align-right (\f038;)
  • icon-align-justify (\f039;)
  • icon-list (\f03a;)
  • icon-indent-left (\f03b;)
  • icon-indent-right (\f03c;)
  • icon-facetime-video (\f03d;)
  • icon-picture (\f03e;)
  • icon-pencil (\f040;)
  • icon-map-marker (\f041;)
  • icon-adjust (\f042;)
  • icon-tint (\f043;)
  • icon-edit (\f044;)
  • icon-share (\f045;)
  • icon-check (\f046;)
  • icon-move (\f047;)
  • icon-step-backward (\f048;)
  • icon-fast-backward (\f049;)
  • icon-backward (\f04a;)
  • icon-play (\f04b;)
  • icon-pause (\f04c;)
  • icon-stop (\f04d;)
  • icon-forward (\f04e;)
  • icon-fast-forward (\f050;)
  • icon-step-forward (\f051;)
  • icon-eject (\f052;)
  • icon-chevron-left (\f053;)
  • icon-chevron-right (\f054;)
  • icon-plus-sign (\f055;)
  • icon-minus-sign (\f056;)
  • icon-remove-sign (\f057;)
  • icon-ok-sign (\f058;)
  • icon-question-sign (\f059;)
  • icon-info-sign (\f05a;)
  • icon-screenshot (\f05b;)
  • icon-remove-circle (\f05c;)
  • icon-ok-circle (\f05d;)
  • icon-ban-circle (\f05e;)
  • icon-arrow-left (\f060;)
  • icon-arrow-right (\f061;)
  • icon-arrow-up (\f062;)
  • icon-arrow-down (\f063;)
  • icon-share-alt (\f064;)
  • icon-resize-full (\f065;)
  • icon-resize-small (\f066;)
  • icon-plus (\f067;)
  • icon-minus (\f068;)
  • icon-asterisk (\f069;)
  • icon-exclamation-sign (\f06a;)
  • icon-gift (\f06b;)
  • icon-leaf (\f06c;)
  • icon-fire (\f06d;)
  • icon-eye-open (\f06e;)
  • icon-eye-close (\f070;)
  • icon-warning-sign (\f071;)
  • icon-plane (\f072;)
  • icon-calendar (\f073;)
  • icon-random (\f074;)
  • icon-comment (\f075;)
  • icon-magnet (\f076;)
  • icon-chevron-up (\f077;)
  • icon-chevron-down (\f078;)
  • icon-retweet (\f079;)
  • icon-shopping-cart (\f07a;)
  • icon-folder-close (\f07b;)
  • icon-folder-open (\f07c;)
  • icon-resize-vertical (\f07d;)
  • icon-resize-horizontal (\f07e;)
  • icon-bar-chart (\f080;)
  • icon-twitter-sign (\f081;)
  • icon-facebook-sign (\f082;)
  • icon-camera-retro (\f083;)
  • icon-key (\f084;)
  • icon-cogs (\f085;)
  • icon-comments (\f086;)
  • icon-thumbs-up (\f087;)
  • icon-thumbs-down (\f088;)
  • icon-star-half (\f089;)
  • icon-heart-empty (\f08a;)
  • icon-signout (\f08b;)
  • icon-linkedin-sign (\f08c;)
  • icon-pushpin (\f08d;)
  • icon-external-link (\f08e;)
  • icon-signin (\f090;)
  • icon-trophy (\f091;)
  • icon-github-sign (\f092;)
  • icon-upload-alt (\f093;)
  • icon-lemon (\f094;)
  • icon-phone (\f095;)
  • icon-check-empty (\f096;)
  • icon-bookmark-empty (\f097;)
  • icon-phone-sign (\f098;)
  • icon-twitter (\f099;)
  • icon-facebook (\f09a;)
  • icon-github (\f09b;)
  • icon-unlock (\f09c;)
  • icon-credit-card (\f09d;)
  • icon-rss (\f09e;)
  • icon-hdd (\f0a0;)
  • icon-bullhorn (\f0a1;)
  • icon-bell (\f0a2;)
  • icon-certificate (\f0a3;)
  • icon-hand-right (\f0a4;)
  • icon-hand-left (\f0a5;)
  • icon-hand-up (\f0a6;)
  • icon-hand-down (\f0a7;)
  • icon-circle-arrow-left (\f0a8;)
  • icon-circle-arrow-right (\f0a9;)
  • icon-circle-arrow-up (\f0aa;)
  • icon-circle-arrow-down (\f0ab;)
  • icon-globe (\f0ac;)
  • icon-wrench (\f0ad;)
  • icon-tasks (\f0ae;)
  • icon-filter (\f0b0;)
  • icon-briefcase (\f0b1;)
  • icon-fullscreen (\f0b2;)
  • icon-group (\f0c0;)
  • icon-link (\f0c1;)
  • icon-cloud (\f0c2;)
  • icon-beaker (\f0c3;)
  • icon-cut (\f0c4;)
  • icon-copy (\f0c5;)
  • icon-paper-clip (\f0c6;)
  • icon-save (\f0c7;)
  • icon-sign-blank (\f0c8;)
  • icon-reorder (\f0c9;)
  • icon-list-ul (\f0ca;)
  • icon-list-ol (\f0cb;)
  • icon-strikethrough (\f0cc;)
  • icon-underline (\f0cd;)
  • icon-table (\f0ce;)
  • icon-magic (\f0d0;)
  • icon-truck (\f0d1;)
  • icon-pinterest (\f0d2;)
  • icon-pinterest-sign (\f0d3;)
  • icon-google-plus-sign (\f0d4;)
  • icon-google-plus (\f0d5;)
  • icon-money (\f0d6;)
  • icon-caret-down (\f0d7;)
  • icon-caret-up (\f0d8;)
  • icon-caret-left (\f0d9;)
  • icon-caret-right (\f0da;)
  • icon-columns (\f0db;)
  • icon-sort (\f0dc;)
  • icon-sort-down (\f0dd;)
  • icon-sort-up (\f0de;)
  • icon-envelope-alt (\f0e0;)
  • icon-linkedin (\f0e1;)
  • icon-undo (\f0e2;)
  • icon-legal (\f0e3;)
  • icon-dashboard (\f0e4;)
  • icon-comment-alt (\f0e5;)
  • icon-comments-alt (\f0e6;)
  • icon-bolt (\f0e7;)
  • icon-sitemap (\f0e8;)
  • icon-umbrella (\f0e9;)
  • icon-paste (\f0ea;)
  • icon-lightbulb (\f0eb;)
  • icon-exchange (\f0ec;)
  • icon-cloud-download (\f0ed;)
  • icon-cloud-upload (\f0ee;)
  • icon-user-md (\f0f0;)
  • icon-stethoscope (\f0f1;)
  • icon-suitcase (\f0f2;)
  • icon-bell-alt (\f0f3;)
  • icon-coffee (\f0f4;)
  • icon-food (\f0f5;)
  • icon-file-alt (\f0f6;)
  • icon-building (\f0f7;)
  • icon-hospital (\f0f8;)
  • icon-ambulance (\f0f9;)
  • icon-medkit (\f0fa;)
  • icon-fighter-jet (\f0fb;)
  • icon-beer (\f0fc;)
  • icon-h-sign (\f0fd;)
  • icon-plus-sign-alt (\f0fe;)
  • icon-double-angle-left (\f100;)
  • icon-double-angle-right (\f101;)
  • icon-double-angle-up (\f102;)
  • icon-double-angle-down (\f103;)
  • icon-angle-left (\f104;)
  • icon-angle-right (\f105;)
  • icon-angle-up (\f106;)
  • icon-angle-down (\f107;)
  • icon-desktop (\f108;)
  • icon-laptop (\f109;)
  • icon-tablet (\f10a;)
  • icon-mobile-phone (\f10b;)
  • icon-circle-blank (\f10c;)
  • icon-quote-left (\f10d;)
  • icon-quote-right (\f10e;)
  • icon-spinner (\f110;)
  • icon-circle (\f111;)
  • icon-reply (\f112;)

在使用中,我们其实可以不用 content 属性类来输出font awesome图标,而是直接输出font awesome图标。如一个超链接图标可以这样写:

<span class="icon-external-link" >&#xf08e;</span>

当然我们要首先要写一个css引入font awesome图标字体库(注意文件路径),方法如下:

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
  url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon-external-link {
  font-family:FontAwesome;
  font-weight: normal;
  font-style: normal;
}

不用 content 属性类来输出font awesome图标这个写法,图标代码同样跟 content 的代码一样,只不过要把前面的反斜杠“\”换为“&#x”。

Font Awesome 4.2.0下载

点击下载

您可能对以下文章也感兴趣

IIS6.0安装配置FontAwesome图标字体运行环境

IIS7.5安装配置Font Awesome图标字体的方法

Font Awesome图标在IE浏览器不显示的解决方法

x

标签: FontAwesome  

※ 网站速度慢?试试网站自动优化工具 ※

上一篇: IIS6.0安装配置FontAwesome图标字体运行环境
下一篇: IIS7.5安装配置Font Awesome图标字体的方法

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.