css: 使用unicode方式引入iconfont圖標


Unicode 是字體在網頁端最原始的應用方式,特點是:

  • 兼容性最好,支持 IE6+,及所有現代瀏覽器。
  • 支持按字體的方式去動態調整圖標大小,顏色等等。
  • 但是因為是字體,所以不支持多色。只能使用平台里單色的圖標,就算項目里有多色圖標也會自動去色。

注意:新版 iconfont 支持多色圖標,這些多色圖標在 Unicode 模式下將不能使用,如果有需求建議使用symbol 的引用方式

在需要引用的樣式里復制代碼:

@font-face {
    font-family: 'iconfont';
    src: url('//static.fczx.com/www/assets/font/iconfont.eot');
    src: url('//static.fczx.com/www/assets/font/iconfont.eot?#iefix') format('embedded-opentype'), 
    url('//static.fczx.com/www/assets/font/iconfont.woff2') format('woff2'), 
    url('//static.fczx.com/www/assets/font/iconfont.woff') format('woff'), 
    url('//static.fczx.com/www/assets/font/iconfont.ttf') format('truetype'), 
    url('//static.fczx.com/www/assets/font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: 'iconfont';
    display: inline-block;
    text-align: center;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}

.logo {
  font-family: "iconfont logo";
  font-size: 160px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Nginx跨域設置:

location / {
            root   D:\code\static;
            index  index.html index.htm;
            add_header Access-Control-Allow-Origin *;
        }

html使用:

<i class="iconfont">&#xeb97;</i>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM