css - 显示为正方形的 Instagram 字体图标

标签 css icon-fonts

我在 Wordpress 中的页脚有许多社交图标,但 Instagram 是唯一无法正确呈现的图标(见附图):

enter image description here

为了更好的字体渲染,我添加了以下内容:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

这就是在我的 style.css 中定义图标的方式:

.icon-instagram:before {
  content: "\e604";
}

问题是什么?我对 css 图标很陌生,所以我不确定在这种情况下会出现什么问题。

谢谢,

编辑1:

font-family 在我的 style.css 中定义如下:

[class^="icon-"], [class*=" icon-"] {
  font-family: 'my-icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

最佳答案

您可以使用来自 here 的另一个字体图标.

CSS : <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">

图标:http://www.socicon.com/chart.php

Facebook :class="socicon-facebook" \E041 • #3e5b98 推特:class="socicon-twitter" \E040 • #4da7de Instagram : class="socicon-instagram" \E057 • #000000 优酷:class="socicon-youtube" \E051 • #e02a20

更多请点击Here

关于css - 显示为正方形的 Instagram 字体图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41618958/

相关文章:

html - Font Awesome 菜单图标有 1px 偏移量

html - 图标字体在 IE11 中行为异常

css - 未加载自定义图标字体

css - 为什么 &lt;header&gt; 之后的 div 没有显示在标题下方?

javascript - 在 href 100% 高度下制作图片

html - 表单选择上的背景文本

javascript - JQuery - 根据 2 个不同的选择下拉值显示隐藏 DIVS

javascript - 如何在django中使用javascript动态更改花括号中的div标签的类名

sencha-touch-2 - Sencha Architect 3 不使用 app.css

css - 更改 CSS 中的图标字体以获得事件状态