图标消失在 Bootstrap

Question

我正在编写一个网站，我在其中创建了 4 个按钮 link 我的社交媒体资料。我想包括 resp 的图标。按钮上的社交媒体。我使用 Mono Social Icons 字体。

在此网站上，您会看到它应该是什么样子：http://cholleton.ch

这是我使用的代码：

<div class="col-md-3 col-sm-6 col-xs-6">
  <a href="https://be.linkedin.com/pub/thomas-geusens/6/630/809" class="symbol linkedin"></a>
</div>

在main.css中我添加了

@font-face {
font-family: 'Mono Social Icons Font';
src: url('../fonts/social/MonoSocialIconsFont-1.10.eot');
src: url('../fonts/social/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
     url('../fonts/social/MonoSocialIconsFont-1.10.woff') format('woff'),
     url('../fonts/social/MonoSocialIconsFont-1.10.ttf') format('truetype'),
     url('../fonts/social/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('../fonts/social/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

.links {
font-size: 10vh;
text-align: center;
}

.linkedin {
background-color: #4488cc;
}

非常感谢您的建议！

托马斯

Answer 1

我想你只是忘了将文本放入 link，像这样：

<a href="https://be.linkedin.com/pub/thomas-geusens/6/630/809" class="symbol linkedin">circlelinkedin</a>

看到这个fiddle

Answer 2

如果您在 class 中将图像设置为背景图像，则在结束 </a> 标记之前添加一个不间断的 space  。如果你想要一个保存在你的目录中的图像，那么使用这样的东西

 <img src="http://www.yourdomain.com/images/linkedin.jpg" alt="linked in">

图标消失在 Bootstrap

Icon disappears in Bootstrap

html

css

twitter-bootstrap

glyphicons