我使用自定义.svg图标创建了一个图标字体,我遇到了填充问题(或者可能是其他问题).我以前的图标不包括任何填充,以防问题出现.

出于某种原因,图标似乎已经转移到应该的位置以上,我找不到任何方法让它们回到容器中.以下是我所谈论的一个例子:http://i.imgur.com/RwOKWLp.png

我已将"背景颜色"设置为黄色以突出显示我的问题.

这是一个图标的HTML:

<div class="vicon" aria-hidden="true" data-icon="&#xe001;"></div>

这是我目前正在使用的CSS:

[data-icon]:before {
    font-family: 'iconfont';
    content: attr(data-icon);
    speak: none;
    font-size: 100%;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.vicon {
    display: inline-block;
    font-size: 50px;
    margin-top: 1em;
    background-color: yellow;
}

@ font-face代码:

@font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
    url('[font_location_on_company_server].woff') format('woff'),
    url('[font_location_on_company_server].ttf') format('truetype'),
    url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}

有谁知道为什么会发生这种情况？

我正在尝试将使用png资源的Android应用程序迁移到图标字体.我可以使用列表视图在导航抽屉中成功使用它.但是我无法在导航视图中使用它,只需在菜单的xml文件中指定它即可.

这是我尝试时得到的 Navigation Drawer

我不知道如何使用图标字体navigation view来获取那些标记的图标.

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_apple"
        android:icon="@drawable/ic_menu_apple"
        android:title="Apple" />
    <item
        android:id="@+id/nav_chrome"
        android:icon="@drawable/ic_menu_chrome"
        android:title="Orange" />
    <item
        android:id="@+id/nav_left"
        android:icon="@drawable/ic_menu_left"
        android:title="Grapes" />
  </group>

如何在此菜单中使用图标字体设置这些图标？

我试图让zurb基础图标字体在我的rails项目中工作,虽然它们似乎没有正常工作

general_foundicons.css.sass

    /* font-face
@font-face
  font-family: "GeneralFoundicons"
  src: font-url("general_foundicons.eot")
  src: font-url("general_foundicons.eot?#iefix") format("embedded-opentype"), font-url("general_foundicons.woff") format("woff"), font-url("general_foundicons.ttf") format("truetype"), font-url("general_foundicons.svg#GeneralFoundicons") format("svg")
  font-weight: normal
  font-style: normal

我有这些文件app/assets/fonts虽然字体似乎没有加载

我对传统纸牌游戏进行了在线概念验证。为了避免实际绘制卡片图片，我使用了相应的 Unicode 字符（例如 U+1F0A1 ）。虽然这在现代 Linux 桌面上效果很好（DejaVu Sans 用于显示这些字符），但其他操作系统（例如 Windows 或 Android）似乎缺乏可以显示这些字符的字体。

一个简单的解决方案是通过 加载 DejaVu Sans @font-face。为了避免下载所有 DejaVu Sans，我想创建一种仅包含相关代码点的字体。原则上，Font Squirrel 的 Webfont Generator允许这样做，但我无法让它与 Unicode Plane 1（扑克牌符号所在的位置）中的字符一起使用。

是否有一些简单的方法来创建@font-face包含 U+1F0A0 到 U+1F0DF 的兼容字体？

我用 fontello 制作了我的字体图标集。目前它的工作原理如下：

<div class="icons_class home" ng-click="toHome()"></div>

对应类的CSS为：

.icons_class {
   font-family: 'myFont';
   ...
   ...
}
.home:before {
   content: '/e822';
}

但我想这样使用：

<div class="icons_class" ng-click="toHome()">home</div>

就像材质图标一样。

是否可以？为此我必须使用连字吗？

材料设计图标

（图标字体大小不正确）

我知道我可以使用CSS修复它们（我已经在下面的代码段中完成了此操作）。但为什么？我可以在样式表中添加CSS技术，以免发生这种情况吗？

Google建议您将“材料设计”图标设置为以下尺寸：

    .material-icons.md-18 { font-size: 18px; }
    .material-icons.md-24 { font-size: 24px; }
    .material-icons.md-36 { font-size: 36px; }
    .material-icons.md-48 { font-size: 48px; }

但是这样做时，“桌面”屏幕上的素材图标会失真。“移动”屏幕没有问题，因为DPI分辨率更好。当然，这个问题不仅存在于字体图标中，而且还存在于其他网络字体中（Roboto是最受欢迎的字体之一）。

我在这里做错什么了吗？解决此问题的最佳方法是什么？

这是我在屏幕上看到的图像

（您必须在新窗口中将其打开才能查看完整分辨率）：

这是我的代码：

    .material-icons.md-18 { font-size: 18px; }
    .material-icons.md-24 { font-size: 24px; }
    .material-icons.md-36 { font-size: 36px; }
    .material-icons.md-48 { font-size: 48px; }

/* Reset */
*, *:after, *:before, *:focus { margin: 0; padding: 0; box-sizing: border-box; outline: 0; }
html { font-family: "Arial"; }
body { padding: 2rem; }
h1 { padding: 0 …

该图标显示在Safari中，但不显示在FF或Chrome中。

在本地开发中遇到以下错误：

Failed to decode downloaded font: http://client.dev/wp-content/themes/client/build/assets/fonts/icons/client.woff2
(index):1 OTS parsing error: head: Bad ppm of 13
(index):1 Failed to decode downloaded font: http://client.dev/wp-content/themes/client/build/assets/fonts/icons/client.woff
(index):1 OTS parsing error: head: Bad ppm of 13

知道为什么吗？我可以以某种方式验证生成的字体文件吗？谢谢！

我注意到在我的 Angular 2 应用程序上，在 IE 11 中，我所有的材料设计图标都会在显示实际图标之前闪烁文本。有针对这个的解决方法吗？有没有办法使用某种预加载器？

我想制作一个旋转的字体图标动画,但我不能让中心成为正确的位置,旋转总是偏移一点.

这是一个例子:

@keyframes circle {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

div {
  padding:0;
  margin:0;
}
.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:20px;
  
}

.inner {
  line-height:0;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>

JSFiddle:https://jsfiddle.net/217z69sm/2/

这是关于我的机器如何看待网络的问题，而不是个人网络项目。 在我的计算机上，某些图标字体显示为文字文本（图标的名称），而不是图形图标本身。

环境

• MacBook Pro（视网膜显示屏，13 英寸，2015 年初）
• MacOS 塞拉利昂 10.12.3
• 使用最新版本的 Chrome、Safari 和 Firefox 浏览器时发生的情况

还

• 我使用良好的互联网连接并且字体文件不会加载失败
• 我不使用代理并且不住在中国
• 禁用所有浏览器扩展后，问题仍然发生。
• 编辑：我在浏览器控制台中根本没有错误/警告。

例如，这就是我看到的https://developers.google.com/web/

和https://material.io/icons/

任何帮助表示赞赏