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"></i>