logo标签列表

一些Icomoon图标无法显示。

cssiconsicon-fonts
4

我在一个应用程序中使用Icomoon - 我遇到了一些小图标无法显示的问题。我已经通过Icomoon App下载了所有图标，而且这是最新版本 - 所有450个都被选中了。

我已经尝试过在一个空白页面上使用它们，没有其他CSS样式，但仍然不能正常工作，以防是应用程序中的一些CSS导致的问题。

<link rel="stylesheet" type="text/css" href="/css/icons/icomoon/style.css" media="screen" />

<i class="icon-user"></i> User
<i class="icon-bars"></i> Bars
<i class="icon-search"><i> Search

在上面的代码中，栏目显示正常，但用户和搜索框没有显示出来。
这是我的style.css文件（截取部分）：
@font-face
{
    font-family: 'IcoMoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.svg#IcoMoon') format('svg'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], 
[class*=" icon-"]
{
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

[class^="icon-"]:before, 
[class*=" icon-"]:before
{
    font-family: 'IcoMoon';
    font-weight: normal;
    font-style: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.icon-users:before {
    content: "\92";
}
.icon-bars:before {
    content: "\b8";
}
.icon-search:before {
    content: "\a0";
}

如果我打开icomoon.svg（唯一一个我可以“编辑”的文件），那么92和a0都在里面：

<glyph unicode="&#x92;" d="M734.994 154.626c-18.952 2.988-19.384 54.654-19.384 54.654s55.688 54.656 67.824 128.152c32.652 0 52.814 78.138 20.164 105.628 1.362 28.94 41.968 227.176-163.598 227.176-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.632-289.006-109.316-289.006-218.626h768c0 109.31-227.958 208.994-289.006 218.626zM344.054 137.19c44.094 27.15 97.626 52.308 141.538 67.424-15.752 22.432-33.294 52.936-44.33 89.062-15.406 12.566-27.944 30.532-35.998 52.602-8.066 22.104-11.122 46.852-8.608 69.684 1.804 16.392 6.478 31.666 13.65 45.088-4.35 46.586-7.414 138.034 52.448 204.732 23.214 25.866 52.556 44.46 87.7 55.686-6.274 64.76-39.16 140.77-166.454 140.77-205.564 0-164.958-198.236-163.598-227.176-32.654-27.49-12.488-105.628 20.162-105.628 12.134-73.496 67.826-128.152 67.826-128.152s-0.432-51.666-19.384-54.654c-61.048-9.634-289.006-109.318-289.006-218.628h329.596c4.71 3.074 9.506 6.14 14.458 9.19z" />

<glyph unicode="&#xa0;" d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384 0-212.078 171.922-384 384-384 95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />

另外，在由icomoon应用程序创建的演示html文件中，所有从7f（下载）到a0（搜索）的图标都显示为空白 - 我正在尝试使用的两个图标都属于此范围。

有任何想法为什么有些会显示而其他图标不会显示？

4个回答
1
在IE11和Edge中遇到的问题是显示大写变体而不是小写图标。这是因为IE11/Edge在处理应用了CSS的字符时忽略大小写，只搜索字体文件中的第一个“匹配项”。
正如您在这张图片中所看到的，小写字母“g”映射到垃圾桶图标，而大写字母“G”映射到播放图标。IE11和Edge错误地使用了第一个大写变体。
您可以通过使用字体锻造检查您的字体文件，并在图标本身的CSS中明确声明“text-transform: lowercase/uppercase”来测试这种可能的原因，看看是否可以解决它。

enter image description here

为了最终解决这个问题，我从图标字体中删除了所有大写字母，并将所有内容重新映射到其他Unicode字符，一切都按预期工作。我在这篇文章中找到了解决方案：IE11中图标字体的奇怪行为。
0

我找到了解决方案。我的问题是只有几个图标根本没有显示，但在打开zip文件中的html文件后，我发现这些相同的图标正常显示。因此，我查看了html和css，并发现为了通过类调用图标，该文件使用了两个类。第一个出现在@font-face调用之下，基本上设置字体的样式和家族，所有需要正确显示字体的内容都要调用此类。下一个示例是使用我的类和icomoon字体文件。

@font-face {
     font-family:"icomoon";
     src: url('fonts/icomoon.eot');
@font-face {
     /*All the urls*/
}

/*THIS IS THE ONE YOU NEED TO CALL*/
.icomoon {
     font-family: "icomoon";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
/*Better font rendering ======*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
我也遇到了同样的问题！你最终是怎么联系他们的？我尝试过：<i class="icomoon-icon-nameoficon"> 和 <i class="icon-icomoon-nameoficon">，但都不起作用。 - tx291
0
当您使用icomoon创建新图标时，您会在下载之前获得预览。如果图标的标签为“多色”，则不会显示。我在Illustrator中创建了一些图标并将它们导入到应用程序中。由于我的剪影是白色的，背景也是白色的，因此这些图标有些损坏，无法使用。

必须使用路径查找器来修复它们，并使其成为单色，另外，具有线条描边的图标会破坏你的图标。

0
是的，我做了许多其他事情——这非常奇怪，因为它是特定的图标而不是浏览器本身。原来这是开发人员需要更新应用程序中与U+7F到U+A0无法呈现或浏览器忽略它们有关的问题，他现在已经解决了。 - bhttoan
感谢您的跟进和发布解决方案！ - zcrar70
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接