Fontello to Wordpress

Question

我使用的是Wordpress主题(Avada)，它有预先安装的字体图标。我的客户想要使用http://fontello.com/的线条图标！他下载了.zip文件并发送给了我。下面是我所做的：

1)解压字体文件，得到以下文件：- css文件夹- -zip文件夹- config.json - demo.html - README.txt

2)我将CSS文件夹中的所有内容都上传到: /wp-content/themes/Avada/css

3)我将font文件夹中的所有内容都上传到: /wp-content/themes/Avada/fonts/fontello/

4)现在我打开了/wp-content/themes/Avada/css/fpslineicons.css，并将@font-face设置为以下路径：

​

@font-face {
  font-family: 'fpslineicons';
  src: url('../fonts/fontello/fpslineicons.eot?98281823');
  src: url('../fonts/fontello/fpslineicons.eot?98281823#iefix') format('embedded-opentype'),
       url('../fonts/fontello/fpslineicons.woff?98281823') format('woff'),
       url('../fonts/fontello/fpslineicons.ttf?98281823') format('truetype'),
       url('../fonts/fontello/fpslineicons.svg?98281823#fpslineicons') format('svg');

​

之后，我转到我的管理面板，在我的首页上以文本方式输入了以下代码：

<i class="icon-heart">Test</i>

我也试过了：

<div class="icon-heart">Test</div>

你猜怎么着？未显示任何内容。谁能告诉我我哪里做错了？我找不到哪里出了问题。

谢谢，克里斯

Answer 1

您是否尝试过将<i>和<div>的font-family显式设置为fontello

div {font-family:'fontello'}

由于您已经在使用另一个图标字体库，这可能是问题所在

Answer 2

确保@font-face{font-family: "fontello";}和[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "fontello";}相同。

​

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

​