<code id="ymosk"><acronym id="ymosk"></acronym></code>
  • <strong id="ymosk"><input id="ymosk"></input></strong>
    <nav id="ymosk"></nav>
    <source id="ymosk"><input id="ymosk"></input></source>
  • <object id="ymosk"></object>

    記憶盒子

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

    首頁搜索目錄
    search
    當前主題: 互聯網絡

    Font Awesome圖標在IE瀏覽器不顯示的解決方法

    作者:Kaka    時間:2016-11-24 12:17:10    瀏覽:    評論:0

    IIS安裝了font awesome圖標字體庫之后,在firefox和chrome上瀏覽正常,但在IE上卻看不見圖標,咋回事?查詢后才知道,font awesome在IE上確實不能運行正常。后來通過查詢,原來可以通過兩個方法來解決這個問題,完美解決了Font Awesome圖標在IE瀏覽器不顯示的問題。

    1、css利用expression表達式輸出圖標

    由于 content: "\f08e"; 的寫法在IE無效,所以圖標無法顯示。不過css里利用expression表達式,使用 this.innerHTML 方法卻是可以輸出圖標的。代碼如下所示:

    .fa-external-link {
      *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xf08e;');
    }

    這其中 &#xf08e; 便是一個font awesome圖標(超鏈接箭頭)。*zoom 前面的星號“*”是表示只對IE瀏覽器有效。

    html代碼就可以這樣寫來輸出一個font awesome圖標:

    <i class="fa fa-external-link"></i>

    這里 fa 是另一個相關的css類,主要是要聲明 font-family 使用 fontAwesome 字體的作用。代碼如下:

    .fa {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    完整html代碼如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
         <meta http-equiv="Cache-Control" content="no-transform " />
         <meta http-equiv="Cache-Control" content="no-siteapp" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
         <title>font awesome實例_兼容IE瀏覽器的方法_卡卡網 webkaka.com</title>
    <style type="text/css">
    /* 引用圖標文件 注意路徑 */
    @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;
    }
    .txtContent{
        width:100%;
        margin:30px 30px 30px 30px;
    }
    .fa {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .fa-external-link:before {
      content: "\f08e";  /* 非IE瀏覽器有效 */
    }
    .fa-external-link {
      *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xf08e;');
    }
    .fa-fw {
      width: 1.28571429em;
      text-align: center;
    }
    </style>
    </head>
    <body>
        <div class="txtContent">
            <font style="font-size:16px;font-weight:bold">超鏈接圖標</font><br>
            <a href="#">超鏈接圖標<i class="fa fa-external-link fa-fw"></i></a><br>
        </div>
    </body>
    </html>

    代碼運行結果如圖:

    css利用expression表達式輸出圖標

    css利用expression表達式輸出圖標

    提示:文章結尾可下載本實例。

    2、html直接輸出圖標

    除了上述使用css類輸出圖標外,其實我是還可以直接在html里寫上圖標編碼,網頁打開時即顯示相應的圖標。這樣說比較抽象,我們看看下面的寫法范例:

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

    這代碼里 &#xf08e; 便是一圖標的編碼(超鏈接箭頭)。查看所有font awesome圖標的編碼

    icon-external-link是css類名,主要作用是要聲明 font-family 使用的字體為 FontAwesome

    .icon-external-link {
      font-family:FontAwesome; /* FontAwesome 無引號 */
      font-weight: normal;
      font-style: normal;
    }

    FontAwesome 是一個變量,它是由 @font-face 定義的,如下代碼所示:

    @font-face {
      font-family: 'FontAwesome'; /* 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;
    }

    聲明 @font-face 時,需要特別主要各文件的路徑要正確。

    完整的html代碼如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
         <meta http-equiv="Cache-Control" content="no-transform " />
         <meta http-equiv="Cache-Control" content="no-siteapp" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
         <title>font awesome實例_兼容IE瀏覽器的方法_卡卡網 webkaka.com</title>
    <style type="text/css">
    @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;
    }
    .txtContent{
        width:100%;
        margin:30px 30px 30px 30px;
    }
    .icon-external-link {
      font-family:FontAwesome;
      font-weight: normal;
      font-style: normal;
    }
    </style>
    </head>
    <body>
        <div class="txtContent">
            <font style="font-size:16px;font-weight:bold">超鏈接圖標</font><br>
            <span class="icon-external-link" style="">&#xf08e;</span>
        </div>
    </body>
    </html>

    運行結果如圖:

    html直接輸出圖標

    html直接輸出圖標

    提示:文章結尾可下載本實例。

    以上是兩個解決font awesome兼容IE瀏覽器的方法,一般來說,第一個方法更好,更容易維護。

    本文實例下載

    點擊下載

    Font Awesome 4.2.0下載

    點擊下載

    您可能對以下文章也感興趣

    IIS6.0安裝配置FontAwesome圖標字體運行環境

    IIS7.5安裝配置Font Awesome圖標字體的方法

    Font Awesome content代碼匯總,共246個

    標簽: FontAwesome  

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

     

    上一篇: IIS7.5安裝配置Font Awesome圖標字體的方法
    下一篇: Linux Nginx安裝配置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.
    微拍福利