• <bdo id="wwck2"><u id="wwck2"></u></bdo>
  • <optgroup id="wwck2"></optgroup>
    <tt id="wwck2"></tt>
  • 記憶盒子

    把記憶裝進灰色的盒子,封裝起來,那年那月,重新拾起。

    首頁搜索目錄
    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瀏覽器不顯示的解決方法

    標簽: FontAwesome  

    加入本站QQ群(312716741),交流分享網站建設、優化、SEO技術。。。

     

    上一篇: 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-2019 All Rights Reserved. 粵ICP備14028160號-1

    Powered By Z-Blog 1.8 Walle Build 91204
    Copyright @2009-2019 All Rights Reserved.
    微拍福利