2013-12-13 76 views
2

我在一個應用程序中使用Icomoon - 我遇到了少量圖標無法顯示的問題。我已經通過Icomoon應用程序下載了所有圖標,這是最新版本 - 所有450個都被選中。一些Icomoon圖標不會顯示

我試過只是一個沒有其他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(搜索)的所有圖標都顯示爲空白 - 我嘗試使用的圖標都屬於此範圍。

任何想法爲什麼有些人會顯示,但其他人不會?

回答

0
+0

是的,我做了很多其他的事情 - 這是非常奇怪的,因爲它是特定的圖標,而不是瀏覽器本身。這就是開發者需要在應用程序中更新U + 7F到U + A0所需的東西,而不能被渲染,或者瀏覽器忽略了他現在已經完成並且已經解決的問題 – bhttoan

+0

感謝您的關注+發佈決議! – zcrar70

0

我找到了解決辦法。我的問題是隻有幾個圖標根本不顯示,但打開zip文件後,我看到那些相同的圖標正確顯示。所以我看到了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; 
} 
+0

我有這個相同的問題!你怎麼最終打電話給他們?我試過了:並且都不起作用。 – bjorkland

0

當您使用icomoon創建一個新圖標時,您會在下載之前進行預覽。如果圖標上有「多色」標籤則不會顯示。我在Illustrator中創建了一些圖標並將它們導入到應用程序中。由於我用白色和白色背景設計的輪廓,圖標有點破碎,無法使用。

不得不使用探路者來修復它們,並使它只是一種顏色,也有線條衝擊殺死你的圖標。