【问题标题】：How to change the content value of iconmoon font?如何更改 iconmoon 字体的内容值？
【发布时间】：2016-10-11 19:22:05
【问题描述】：

我在菜单上使用了 icomoon 字体。我无法更改图片菜单的字体图标。最初它是 BLOG 图标。现在我需要用图片（相机）的图标来改变它。如何将BLOG的内容值改为PICTURE？

HTML 部分

<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 部分

@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); }

【问题讨论】：

标签： css fonts embed font-face

【解决方案1】：

实际上，在 CSS 中更改图标非常容易。你可以拥有自己的图标类，例如 FontAwesome 使用了 2 个类，第一个是 fa 设置默认属性，第二个是图标内容，如 fa-home 为 home，所以你称之为 class="fa fa-home"。为什么更好？您无需维护该默认属性部分，每个添加的图标都需要将其添加到该列表中。
我建议改变这个：

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

到这里：

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

并将其与 class="im icon-camera" 等内容类一起使用：

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

如果您想更改图标，只需更改 content 部分，通过检查图标的代码并查看类名，可以在其 website 上找到 unicode 值，其中图片/相机具有类 .free-uniE90F 所以你的相机代码是content: "\e90f";

【讨论】：