为啥我的矢量图标显示不出来
来源:3-3 图标字体
a584280674
2019-09-02 10:03:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="fonts/iconfont.css" />
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"
});
</script>
</head>
<body>
<i class="icon-gouwuche"></i>
</body>
</html>
iconfont.css部分
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.eot?t=1567353945033'); /* IE9 */
src: url('../fonts/iconfont.eot?t=1567353945033#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAToAAsAAAAACegAAASZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqHBIVkATYCJAMUCwwABCAFhG0HShtyCBHVo8WQ/ThMtzOypn7uOVCmfor7Dp5HvL4/N0mVdiG6b6FZWB/04MOeAPB9N7s1jIlQLIm95adv4Rd2+kJ643+OmS4TLP9787lkl01nE5zNKq6Cy0/gDuj0BPUW8Wwy+J/A5yGApTQ1kY6dew7Ex6AeEkBmTpsyDj9iwRQwBV/vZlxrkF04+GqLehHY6fy8fEN98UHhaNSTfSd3mkjbz/mikY6zMSMtBNLuXAB7E2igJmBA5md6ZqK9TE00Vv49Q1vA4qNQn/N54c8rf9Eom0VRLEhntX94YBA0CsRF1USIbZs18DmGJNAWBhMC2srgQnNsUsiigOO6FixQEKQ4yERUSkVWBbhoVD6ncC4UaiEpZQL86lylctWMZkT79hVU+/eHuRIHReccKDzUFh4STut/s8KZdOdksuzp1KDECzX67U8cPFB48NPp8mczXZ5KlTuV7Di8tKg2AxUvHRFiCw+MtraFtg9jRe7SJ15ubLdeii+HYeJ8oWEcvi//bz9QYkSRIw8PjYbnmXvnq/FriTdyXh+49UrO1cTl+NKExHutmHxga8GJhy5XmTLp/NWBav+hgrkPHBF9ZGtRdej45fNV8uy/WOTgyeL0w4aHHE6UkAMHCttz8YownR58NSMWXzI5ME5Vc0E8m90imUyfy6lEpsZLqUGUanIJvkxmSCo1aPVzT/tjlziBu9Tzvc3G/dzNY3P7X1ne/2r7wPWfm9yDBvzUVkxVbveebaVk/robOkRbwgY3i9Xt2EFUx/Z1y6JRyT9TNq4XuHWf2jcYu8QNvM1uHv+rr7+yI4f63hLHOm2r3WJTbg8+/b2vvqJB/V0N1oxvUbZ57nwl8+VuHuWu0f2m7lSiyL1FS3Vu2qZ48Q79V9/bqE1VczIe1F8zV11dSQwzHluTfHPajDv03VOLCy5OPvXJD60fv/OdO1v9/2ihZV5wav4pHayuWqvqMuofyTDox+T974/TK/i3WLJu946mNZtetO+durq2FvVvHRX6dd/esdbIQu0rqpFLlw9XKLSaZGSlQu17dKyV2dJ/avR9kf8jP9uiBefu7lCkq268+5x/D+k4N/q/yPdR8+HtGDJMOkh7y9hONFHAaC8dvCxFXa17q2cg+6MOOm+W7D9hPD0JQNfU/gf4On7DnHvH5Gn5m380ALy1J9dQZ7i6zn8QXoHPzWQoQPylUOSq1TGSzCBks9ImPThMJoDHJf2yDFkM5Of9bnSFKteC4FMoAIVHKdD4VEQabE1wCGkILj5twFKDLjeHFGA+GjEBUJ0NBIS83ARFbh4BTV5eQhrse+BQmO/AJa9osAyWAvcMqSzTrHsSGEVJ9k9NwaPT7Xpw6++oQm8kLHdYb8jUxCmNknj+hhHSxZnpU2WqjpzwQFfyMvQ9kxduUWhUq/o8jl3WJ0UFD7MDHQRGUZL9U1Pw6Kz5ekh8/x1V6I0UjJUF35CpWZzSKKmAvGnGSmOnsn76VJmqo/Y54YGu4EKvZZh89rYWhUZ1g5TPY5zmqmqi4XXDOZa+7BPVzY4o0WLEERd34++VpLuKwzcUNVY1D1gLxoh5NgMAAAA=') format('woff2'),
url('../fonts/iconfont.woff?t=1567353945033') format('woff'),
url('../fonts/iconfont.ttf?t=1567353945033') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../fonts/iconfont.svg?t=1567353945033#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon01:before {
content: "\e616";
}
.icon-gouwuche:before {
content: "\e735";
}
.icon-home:before {
content: "\e626";
}
.icon-renwu:before {
content: "\e600";
}
1回答
同学你好, 因为你没有给i标签添加设置字体样式的类名iconfont, 所以无法显示图标。 建议修改:


如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
相似问题