字体图标渲染后消失

3
我正在建立一个个人网站,https://stark-ridge-41061.herokuapp.com。其中有几个GitHub、SO等图标,其中之一是linkedin,但由于某种原因,Linkedin的图标会在Chrome浏览器中出现一瞬间然后消失。我不确定这是否重要,但当页面在Chrome中呈现时,我的fa-indeed元素没有像所有其他fa图标一样的::before标签。
我已在Firefox中测试过,所有图标都正确显示。当前何处存在问题,导致它在Chrome中表现出这种方式,并且我应该怎么做才能解决它?

在您的代码摘录中,行被截断了,因此我们无法看到足够的代码来判断。 - Mike
他们在Chrome和Edge上在您的网站上表现良好。源代码看起来不错。 - Mike
FYI - 我正在使用IE11(这是我在工作中唯一能使用的东西,而且我现在就在工作),只有你的Quora图标显示出来了。 - amallard
@amallard,那很可能是由于防火墙的原因。 - user2993456
3个回答

7

这是因为Adblock或某种跟踪阻止器所致。通过我的控制台我发现了这一点。更好的方法是将fa-linkedin类重命名,以避免此问题。

::content .essb-fans-twitter, ::content .essb-fans-youtube, ::content .essb-mobile-sharepoint, ::content .essb_bottombar, ::content .essb_item, ::content .essb_link_pinterest, ::content .essb_link_twitter, ::content .essb_links_list, ::content .essb_share, ::content .essbfc-container, ::content .essbfc-facebook, ::content .essbfc-instagram, ::content .essbis-hover-overlay, ::content .et-social-google-plus, ::content .et-social-icon, ::content .et-social-icons, ::content .et_social_facebook, ::content .et_social_flyin, ::content .et_social_follow, ::content .et_social_icons_container, ::content .et_social_inline, ::content .et_social_networks, ::content .et_social_pinterest, ::content .et_social_popup, ::content .et_social_sidebar_networks, ::content .et_social_twitter, ::content .etsocialmediahyperlink, ::content .event-share-center, ::content .event-social-box, ::content .eventShare, ::content .ew-social-icons, ::content .expand-share, ::content .expanded_story_socialmedia, ::content .extra-social, ::content .extra-social-links, ::content .extreme-share, ::content .eyebrow-share-widget, ::content .f-social, ::content .f-social-link, ::content .fBsocial, ::content .fButtonLarge, ::content .f_social, ::content .fa-facebook, ::content .fa-facebook-f, ::content .fa-facebook-square, ::content .fa-fb, ::content .fa-flickr, ::content .fa-google, ::content .fa-google-plus, ::content .fa-google-plus-square, ::content .fa-instagram, ::content .fa-linkedin, ::content .fa-linkedin-square, ::content .fa-pinterest, ::content .fa-pinterest-p, ::content .fa-pinterest-square, ::content .fa-reddit, ::content .fa-reddit-square, ::content .fa-share-alt, ::content .fa-share-square-o, ::content .fa-soundcloud, ::content .fa-tumblr, ::content .fa-tumblr-square, ::content .fa-twit, ::content .fa-twitter, ::content .fa-twitter-square, ::content .fa-vine, ::content .fa-youtube, ::content .fa-youtube-play, ::content .fa-youtube-square, ::content .faceBookButton, ::content .faceBookShareContainer, ::content .facebook-24x24, ::content .facebook-activity, ::content .facebook-badge, ::content .facebook-banner, ::content .facebook-banner-wrapper, ::content .facebook-bar, ::content .facebook-big-share, ::content .facebook-block, ::content .facebook-box, ::content .facebook-box-widget, ::content .facebook-broadcasting-widget, ::content .facebook-btn, ::content .facebook-button, ::content .facebook-button-link, ::content .facebook-circle, ::content .facebook-connect-dialog, ::content .facebook-container, ::content .facebook-count-single, ::content .facebook-facepile, ::content .facebook-fans, ::content .facebook-flyout, ::content .facebook-follow, ::content .facebook-follow-button, ::content .facebook-footer, ::content .facebook-ft, ::content .facebook-hover-horizontal, ::content .facebook-icon, ::content .facebook-icon-small, ::content .facebook-image, ::content .facebook-inner, ::content .facebook-like, ::content .facebook-like-bottom, ::content .facebook-like-box, ::content .facebook-like-button-head, ::content .facebook-like-large, ::content .facebook-like-message-holder, ::content .facebook-likebox, ::content .facebook-likebox-promo, ::content .facebook-link, ::content .facebook-menu, ::content .facebook-modal, ::content .facebook-module, ::content .facebook-p, ::content .facebook-recommend, ::content .facebook-right-rail, ::content .facebook-row, ::content .facebook-section, ::content .facebook-share, ::content .facebook-share-bottom, ::content .facebook-share-btn, ::content .facebook-share-button, ::content .facebook-share-link, ::content .facebook-share-story, ::content .facebook-sharer, ::content .facebook-sharetool, ::content .facebook-sidebar, ::content .facebook-sidebar-outer, ::content .facebook-social, ::content .facebook-social-likes, ::content .facebook-top, ::content .facebook-top-button, ::content .facebook-twitter, ::content .facebook-twitter-share, ::content .facebook-twitter-wrap, ::content .facebook-widget, ::content .facebook.icon, ::content .facebook2, ::content .facebookActivity, ::content .facebookBloc_png, ::content .facebookBox, ::content .facebookBtn, ::content .facebookButtonDiv, ::content .facebookConnect, ::content .facebookContainer, ::content .facebookCountDiv, ::content .facebookFanBox, ::content .facebookFeed, ::content .facebookFrame, ::content .facebookGroup, ::content .facebookHomepageBottom, ::content .facebookIcon, ::content .facebookImage, ::content .facebookItem, ::content .facebookLike, ::content .facebookLikeBox, ::content .facebookLikeboxContentContainer, ::content .facebookLink, ::content .facebookOptions, ::content .facebookOuter, ::content .facebookRec, ::content .facebookRecentActivity, ::content .facebookRecommend, ::content .facebookRecommendation, ::content .facebookShare, ::content .facebookShareAlert, ::content .facebookShareIcon, ::content .facebookShareToolsContainer, ::content .facebookSharer, ::content .facebookSite, ::content .facebookSocialIcon, ::content .facebookTwitterIcons, ::content .facebookWidgetry, ::content .facebookWrapperModule, ::content .facebook_24, ::content .facebook_activity, ::content .facebook_badge, ::content .facebook_block, ::content .facebook_box, ::content .facebook_box_sidebar, ::content .facebook_btn, ::content .facebook_button, ::content .facebook_button_bg, ::content .facebook_cont, ::content .facebook_fanbox, ::content .facebook_follower, ::content .facebook_icn, ::content .facebook_icon, ::content .facebook_image, ::content .facebook_indiv_widget, ::content .facebook_large, ::content .facebook_like, ::content .facebook_like_box, ::content .facebook_logo, ::content .facebook_net, ::content .facebook_new, ::content .facebook_plugin_container, ::content .facebook_plugin_parent_block, ::content .facebook_pop {
    display: none;
}

谢谢,我应该想到这个的。现在看来很明显。 - user2993456

0

我从JohannesB的回答中没有得到太多信息,但通过尝试和错误,我找到了解决问题的方法:

之前我使用的是来自fontawsome的以下js:

我用以下 CDN 替换了它:

它起作用了!!


0

我发现如果页面上有两个fontawesome实例,也会出现这种情况。我在页脚加载了专业版一次,但没有注意到我还在页脚加载了旧的免费套件。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接