여러 Icomoon 글꼴 (여러 글꼴 모음)을 사용하는 방법

Icomoon 글꼴은 하나의 글꼴 모음 만 있으면 잘 작동하지만 다른 글꼴 모음을 만들고 처음에 함께 사용하려면 어떻게해야합니까? 나는 이런 식으로하려고했다 :여러 Icomoon 글꼴 (여러 글꼴 모음)을 사용하는 방법

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

@font-face { 
    font-family: 'abccons'; 
    src:url('fonts/abccons.eot'); 
    src:url('fonts/abccons.eot?#iefix') format('embedded-opentype'), 
    url('fonts/abccons.woff') format('woff'), 
    url('fonts/abccons.ttf') format('truetype'), 
    url('fonts/abccons.svg#abccons') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

나는 font-family와 정확히 같은 폰트 파일 이름을 가지고있다. 또한 첫 번째 글꼴 아이콘에 "data-icon"속성을 사용하고 두 번째 글꼴에 "data-icon2"속성을 사용하고 있습니다.

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

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

내가 올바른 방법으로하고 있는지 확실하지 않습니다. 글꼴은 http://css-tricks.com/html-for-icon-font-usage/에 설명 된 방법으로로드됩니다. 결과는 다음과 같습니다. 첫 번째 글꼴은 올바르게로드되지만 두 번째 글꼴은 이미로드 된 것처럼 보입니다. 글꼴은 표시하지 않고 모두 사각형 모양으로 표시됩니다. css 파일에서 data-icon2로 설정했지만 html에서 data-icon3을 사용하면 (오류를 만들려고 함) 아무 것도로드되지 않습니다.

아이디어가 있으십니까?

출처

2013-06-18 Ryan.C