我已经对字体(我使用icomoon 的应用程序构建)进行了 base64 编码,以防止字体出现跨域问题,但为什么我缺少一些图标?google-chome上的一切看起来都很好。
铬合金
Firefox(Facebook、Twitter 图标丢失)
@font-face {
font-family: 'Radiance';
src:url('fonts/Radiance.eot');
}
@font-face {
font-family: 'Radiance';
src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),
url(data:application/x-font-ttf;charset=utf-8;base64,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AhwBAS48RmNjjGMlAhwCBAsEPAoKHgpjPVY9PVYAAAAAAQAA/+ABogGAACcAACUiByc2NTQnNxYzMjY0JiIGFRQXByYjIgYUFjMyNxcwBhUUFjI2NCYBVyIXkQgCkRUeHywsPSwCkBYfHiwsHhIRoQEsPSwsdRxHDxAECDYWLD0sLB4GCDUWKz4rCU8EAR4sLD0sAAABAAD/4AGhAYAACwAAJSM1IxUjFTMVMzUzAaCUd5WVd5TslJR3lZUAAf///+AA7QGBABcAABMjBiYOAh0BIxUzFzM1MzcjNTQ+ATsB7U4BEx8dFTo7AVo9DEoBEA44AYACBAoPKBs6Pc/PPTADCQ4AAQAC//MBvgFPADwAAAEHNRUUBwYHBicmJzI+ASciJx4BMj4DMS4BLwEeATI+AzEuAj4BMR4EMzcmNTQ2MzIXPwEHAb4qAwJccY8dEzc7BQEbOwMJCQkJBgQeKQUFAwkKCgoHBRQVAwMFBC05OyUBAwM1JSUfCCocASAqAQcKDHdKWzYLDBcOBTcDAwECAgETKAsMAwMBAgMBECUeGw8UIhUQBgEKECYyJAQcOAAAAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBSAGEAZABpAGEAbgBjAGUAAFJhZGlhbmNlAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAFIAYQBkAGkAYQBuAGMAZQAgADoAIAAxADEALQA5AC0AMgAwADEAMwAARm9udEZvcmdlIDIuMCA6IFJhZGlhbmNlIDogMTEtOS0yMDEzAABSAGEAZABpAGEAbgBjAGUAAFJhZGlhbmNlAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABSAGEAZABpAGEAbgBjAGUAAFJhZGlhbmNlAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgAAAAEAAgECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAd1bmlGMDAwB3VuaUUwMEUHdW5pRTAwQwd1bmlFMDBEB3VuaUUwMEIHdW5pRTAwQQd1bmlFMDA5B3VuaUUwMDcHdW5pRTAwNgd1bmlFMDA0B3VuaUUwMDMHdW5pRTAwMgd1bmlFMDAxB3VuaUUwMDAHdW5pRTAwNQAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwARAAEABAAAAAIAAAAAAAEAAAAAyYlvMQAAAADOVmJ1AAAAAM5WYnU=) format('truetype');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Radiance';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-back-to-top, .icon-arrow-left, .icon-arrow-right, .icon-person, .icon-calendar, .icon-comment, .icon-home, .icon-flickr, .icon-rss, .icon-search, .icon-share, .icon-add, .icon-facebook, .icon-twitter {
font-family: 'Radiance';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-arrow-left:before {
content: "\e00c";
}
.icon-arrow-right:before {
content: "\e00d";
}
.icon-comment:before {
content: "\e009";
}
.icon-rss:before {
content: "\e004";
}
.icon-facebook:before {
content: "\e000";
}
.icon-twitter:before {
content: "\e005";
}