2016-06-08 22 views
0

ich derzeit <span class="icon-home2"></span> bin mit Symbolen in meiner CSS-Datei anzuzeigen:wie Symbol aus ttf-Datei verwenden Unicode mit

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

[class^="icon-"], [class*=" icon-"] { 
/* use !important to prevent issues with browser extensions that change fonts */ 
font-family: 'icomoon' !important; 
speak: none; 
font-style: normal; 
font-weight: normal; 
font-variant: normal; 
text-transform: none; 
line-height: 1; 

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
} 



.icon-home:before { 
content: "\e900"; 
} 

Jetzt habe ich eine andere Anforderung, in dem ich die Symbole zeigen muß, mit Inhalten in CSS mit Unicode, die hier abgebildet ist:

.icon-home:before { 
    content: "\e900"; 
} 

Kann mir jemand sagen, wie kann ich das erreichen?

+1

ohne Bezug zu Ihrem Problem, aber im Zusammenhang mit modernen Web-Design-Arbeit: Stop mit all diesen veralteten, verlassenen und r Edutierbare Schriftformate. Verwende WOFF, benutze 'eot' wenn du * hast * um IE8 und darunter zu unterstützen und belasse es dabei. WOFF ist Byte-für-Byte äquivalent zur Schriftart ttf/otf. Wenn Sie also bereits WOFF haben, ist das Hinzufügen von ttf/otf sinnlos, "eot" war bereits veraltet, aber jetzt veraltet, da MS * offiziell * IE8 nicht mehr unterstützt und darunter, und 'svg' ist seit Jahren kein echtes Schriftformat mehr. Immer vereinfachen Sie Ihre Probleme: Beginnen Sie einfach mit WOFF. –

Antwort

0

bekam ich die Antwort: anhängen & #x vor Unicode von Icons zB Symbol-Code ist E001 dann Daten-Symbol

erinnern
[data-icon]:before { 
    font-family: icomoon; /* BYO icon font, mapped smartly */ 
    content: attr(data-icon); 
    speak: none; /* Not to be trusted, but hey. */ 
} 

und Zugang mit

<i aria-hidden="true" data-icon="&#xe908;"></i> 

in CSS-Datei hinzufügen = "& # xe001"