Javascript 导航选项卡无法插入图像。如何将图像作为图标放置在导航选项卡中？

我有一点问题，我不知道如何调整导航标签引导/css文件

我想在导航选项卡中添加一个图像文件，使图像成为一个图标，并使页边距底部靠近导航选项卡的文字。就我的进步而言，我的大多数尝试似乎都没有达到我想要的

根据插入的图像，如果可以更改HTML结构，我可以看到这就是您想要的

img{
宽度：48px；
高度：48px；
}
保险商实验室{
列表样式：无；
}
ulli{
显示：内联块；
文本对齐：居中；
边框：1px实心#ff0000；
}

目标是变成这样：

如您所见，图标靠近标题，单击（活动）时选项卡轮廓也会变为白色，标题也会变为红色

我对css做了一些修改

.nav tabs>li.active>a，
.nav选项卡>li.active>a:悬停，
.nav选项卡>li.active>a:焦点{
背景色：#fff；
字号：700；
颜色：#c72027；
高度：90px；
}
.导航标签{
背景色：#FAFAFA；
字号：700；
颜色：#CCC；
边框：实心1px#ddd；
高度：90px；
}

您好。谢谢你的回复。我已经尝试过你的方法，它的工作原理如代码片段所示。但是，目标是使图标尽可能靠近标题。我已经把我的答案贴在下面了，但是有点乱。如果你能建议我如何清理它，那就太好了。干杯您好@ImanManan您能用当前的css更新示例吗？我运行了您的代码片段，但结果与图像不符。