Javascript 图标未在图像上正确显示

我正在使用新的Instagram插件（不带API）来显示与Instagram帐户相关的内容，除了插件不显示与内容相关的图标，如

卡

，

视频

等，其他插件都可以正常工作

代码没有添加与内容相关的图标，但我没有注意到插件生成的html代码将CSS类添加到锚定元素中，如instagram video，instagram image，instagram sidecar

基于此，我想使用CSS功能来检测元素的CSS，例如

.instagram\u gallery>a[class*=“instagram video”]

，如果锚元素有视频类等，则添加相关CSS来显示视频图标

我的代码没有正确显示图标，因为它可以在中看到

代码示例

（函数（$）{
$（窗口）.on（'load'，function（）{
$.instagramFeed({
“用户名”：“instagram”，
“容器”：“instafeed”，
“显示配置文件”：false，
“显示传记”：false，
“显示库”：true，
“回调”：null，
“样式化”：正确，
"项目":16，
“每行项目数”：4，
“边距”：1
}); 
});
})（jQuery）
@介质（最大宽度：768px）
{
.instagram_gallery>a{
宽度：50%！重要；
显示：内联块；
}
.instagram_gallery>a>img{
宽度：100%！重要；
填充：15px；
}
}
@介质（最大宽度：500px）
{
.instagram_gallery>a{
宽度：100%！重要；
显示：内联块；
}
.instagram_gallery>a>img{
宽度：100%！重要；
填充：15px；
}
}
.instagram_gallery>a
{
}
.instagram_gallery>a[class*=“instagram视频”]{
边框：1px实心#f00；
背景图像：url（'https://image.flaticon.com/icons/svg/860/860832.svg')
}
看看这个代码笔。我使用伪元素
：after
来显示图标


$（窗口）.on（“加载”，函数（）{
$.instagramFeed({
用户名：“instagram”，
容器：“#instafeed”，
显示配置文件：false，
显示：错误，
显示库：正确，
回调：null，
造型：没错，
项目：16，
每行项目数：4，
保证金：1
});
});
.instagram\u图库{
显示器：flex；
对齐项目：居中；
柔性包装：包装；
}
·instagram_画廊a{
位置：相对位置；
宽度：25%；
填充：10px；
}
.instagram_图库img{
宽度：100%！重要；
边距：0！重要；
}
.instagram_图库.instagram视频：之后{
内容：''；
显示：块；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（255、255、255、0.5）；
背景图像：url（'https://image.flaticon.com/icons/svg/860/860832.svg');
背景重复：无重复；
背景位置：中心；
背景大小：30%；
}

我看不到视频图标，因为第二项是视频，显示视频图标。我在你的代码笔示例中看不到它虽然我可以清楚地看到它，但我做了一些更改。你能再试一次吗？现在我能看到了，不知道为什么以前没有显示。。为了清晰起见，您是否也可以在解决方案中添加代码段。同时，将显示器改为flex也破坏了机动性，因为它在小屏幕上只能显示两列。我将修复只想共享的问题，以使解决方案完整。。