仿淘宝提问3

仿淘宝提问3

这个问题很严重,为什么同样从网上icons图标库中下载出来的图标,怎么文件跟老师的不一样呢?

而且iconfont.css文件中上面引入的东西完全不一样,导致我项目报错

我下载出来的文件:http://img1.sycdn.imooc.com//climg/5df0bcc909990d1d02480180.jpg

老师的文件:http://img1.sycdn.imooc.com//climg/5df0bce3097b0e5810710055.jpg

为什么我会多出一个woff2文件来呢?是因为这个官方库我已经下载过其他的项目?


而且在打开inconfont.css文件中,上面的引入也不一样,根本没去动里面的东西

我的:http://img1.sycdn.imooc.com//climg/5df0bd3709b7c4b511860195.jpg

老师的http://img1.sycdn.imooc.com//climg/5df0bd4709fb807c12020201.jpg

我的对比老师的首先base64我的在woff2上,老师的在woff上

其次比老师的多出来一条url('iconfont.woff?t=1576053306179')format('woff')

这到底是为什么,下载出来文件根本没动,很烦,不是路径的问题,文件都不一样

因为找的图标不一样?还是以前创建过其他的项目?还是什么?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,改这5个路径就可以:

http://img1.sycdn.imooc.com//climg/5df1d576099a359008060220.jpg

视频中老师将iconfont.css文件改成了_icons.scss文件,放在了scss文件中,然后需要根据现在的路径去找与fonts文件夹中字体的关系:

http://img1.sycdn.imooc.com//climg/5df1d5d909f3577013860715.jpg

所以前面添加了../fonts,如果同学的文件夹关系和视频中一致,那么也加上这个路径。如果关系不一样,按照自己当前文件与字体之间的关系添加路径就好。

祝学习愉快!

  • 看不穿繁华 提问者 #1
    好的,谢谢, 老师
    2019-12-12 14:40:53
好帮手慕星星 2019-12-11 19:12:49

同学你好,问题解答如下:

1、老师测试了一下,下载的内容和你一样,会比视频中多出一个woff2,可能是版本的问题,不过不用担心,使用方式是一样的,项目中可以把woff2保留着。

2、iconfont.css文件中的代码都是内部的,可能会随着版本的改变而改变,我们需要做的就是把路径修改了之后进行使用。1576053306179这段编号不同可能是图标找的不一致,视频中找的图标的class名称是:

http://img1.sycdn.imooc.com//climg/5df0ce3209e1d93e07510400.jpg

可以从保存的图标处查看class名,例如:

http://img1.sycdn.imooc.com//climg/5df0cea109c91cc010710428.jpg

老师找的这个图标就和视频中不一致,所以class名字也不一致,同学可以对比一下。或者不按照老师的图标,使用自己下载的,记得class名要和视频中不一致。

3、现在同学跟着视频中将路径修改正确了之后使用就好,不需要担心其他问题。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 看不穿繁华 #1
    iconfont.css这个文件不是需要进去之后该下上面的路径吗,就是以后不知道进去之后对哪些文件的路径需要更改啊,就像我截图的,里面有两个src路径和四个url路径,根本不知道哪些路径是需要在这个项目中更改的,因为和视频中老师更改的路径有出入,麻烦讲解一下
    2019-12-12 10:44:52
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师