Wie ändere ich den Inhalt von iconmoon font?

Question

Ich habe icomoon Schriftart auf meiner Speisekarte verwendet. Ich konnte das Schriftart-Symbol des BILD-Menüs nicht ändern. Anfangs war es BLOG-Symbol. Und jetzt muss ich es mit dem Symbol von BILD (KAMERA) ändern. Wie ändert man den Inhalt von BLOG in PICTURE?

HTML TEIL

<nav id="menu" class="nav">     
<ul> 
<li> 
<a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-home"></i> </span> 
<span>Home</span> 
</a> 
</li> 
<li> 
<a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-portfolio"></i></span> 
<span>About Us</span> 
</a> 
</li> 
<li> 
<a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-camera"></i></span> 
<span>PICTURE</span> 
</a> 
</li> 
</ul> 
</nav> 

CSS TEIL

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

@font-face { 
font-family: 'icomoon'; 
src: url('../fonts/icomoon.svg#icomoon') format('svg'); 
}; 

.icon-camera, .icon-home, .icon-portfolio { 
font-family: 'icomoon'; 
speak: none; 
font-style: normal; 
-webkit-font-smoothing: antialiased; 
} 

.icon-camera:before { content: "\e600"; } 
.icon-home:before { content: "\e002"; } 
.icon-portfolio:before { content: "\e003";} 

a, li { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

Answer 1

Es ist in der Tat sehr einfach Symbole in CSS zu ändern. Sie können Ihre eigenen Icon-Klassen haben, zum Beispiel FontAwesome verwendet 2 Klassen, zuerst fa, um Standardattribute und Sekunde für Icon-Inhalt, wie fa-home für zuhause, so dass Sie es class="fa fa-home" nennen. Warum ist es besser? Sie müssen diesen Standardattributteil nicht beibehalten, wenn Sie ihn mit jedem hinzugefügten Symbol zu dieser Liste hinzufügen müssen.
Ich würde dies ändern vorschlagen:

.icon-camera, .icon-home, .icon-portfolio { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    -webkit-font-smoothing: antialiased; 
} 

dazu:

.im { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    -webkit-font-smoothing: antialiased; 
} 

und es mit Content-Klassen wie class="im icon-camera" verwenden:

.icon-camera:before { content: "\e600"; } 
.icon-home:before { content: "\e002"; } 
.icon-portfolio:before { content: "\e003";} 

Und wenn Sie wollen Symbol ändern, Ändern Sie einfach den content Teil, in dem Unicode-Wert auf ihrem website gefunden werden kann, indem Sie den Code des Symbols und lo überprüfen Oking bei Klassennamen, wo Bild/Kamera Klasse .free-uniE90F hat, so wird Ihr Code für die Kamera content: "\e90f";