图标在Bootstrap中消失

时间:2015-08-05 12:52:00

标签: html css twitter-bootstrap glyphicons

我正在编制一个网站,我创建了4个链接到我的社交媒体资料的按钮。我想要包含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;
}

非常感谢您的建议!

托马斯

2 个答案:

答案 0 :(得分:0)

我想您忘了将文字放在链接中,如下所示:

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

请参阅此fiddle

答案 1 :(得分:0)

如果您将图像设置为班级中的背景图片,则在结束&nbsp;标记之前输出不间断的空格</a>。如果您想要保存在目录中的图像,请使用类似

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