Question

我正在编制一个网站，我创建了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;
}

非常感谢您的建议！

托马斯

Answer 1

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

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

请参阅此fiddle

Answer 2

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

的内容

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

图标在Bootstrap中消失

2 个答案: