我在一个应用程序中使用Icomoon我遇到了一个小图标不能显示的问题。我已经通过图标应用下载了所有的图标,这是最新的版本-所有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="’" 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=" " 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" />
此外,在从图标应用程序创建的演示html文件中,从7f (下载)到a0 (搜索)的所有图标都显示为空白-我尝试使用的两个图标都属于这个范围。
你知道为什么有些人会出现而另一些人不会吗?
发布于 2013-12-15 03:57:18
您尝试过前面的stackoverflow答案中提出的解决方案了吗?
IcoMoon icons not working in Internet Explorer 8
Why does one of these font-face render in IE8, but the others don't?
发布于 2015-01-30 04:48:11
我找到了解决方案。我的问题是,只有几个图标根本没有显示,但在打开压缩文件中的html文件后,我看到这些相同的图标正确显示。所以我看到了html和css,并且看到了通过文件使用的类调用图标的方法。第一个出现在@ font -face调用的下面,这个调用基本上设置了字体的样式和系列,字体正确显示所需的一切,所以调用这个类。下一个例子是使用我的类和图标字体文件。
@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;
}
发布于 2017-02-21 22:46:56
当你用图标创建一个新图标时,你会在下载前得到一个预览。如果图标的标签为“multicolor”,则不会显示。我在illustrator中创建了一些图标并将它们导入到应用程序中。由于我的剪影是白色的,背景也是白色的,所以图标有点破损,无法使用。
我不得不使用探路器来修复它们,使其只有一种颜色,也有线条笔画杀死你的图标。
https://stackoverflow.com/questions/20571588
复制相似问题