为啥我的矢量图标显示不出来

来源: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回答

好帮手慕慕子

2019-09-02

同学你好, 因为你没有给i标签添加设置字体样式的类名iconfont, 所以无法显示图标。 建议修改:

http://img.mukewang.com/climg/5d6cb1520001944104920104.jpg

http://img.mukewang.com/climg/5d6cb15900012c7b00700043.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

0

0 学习 · 6815 问题

查看课程