Question

我正在使用预装了fontawesome图标的Wordpress主题（Avada）。我的客户想要使用http://fontello.com/中的lineicons！他下载了.zip文件并发送给我。这是我做的：

1）解压缩-zip文件并获得以下文件： - css文件夹 - 字体文件夹 - config.json - demo.html - README.txt

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

3）我将字体文件夹中的所有内容上传到：/ wp-content / themes / Avada / fonts / fontello /

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

＆＃13;

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

＆＃13;

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

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

我也尝试过：

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

猜猜是什么？没有显示任何内容。有人能告诉我我做错了什么吗？我找不到有什么问题。

谢谢，克里斯

Answer 1

您是否尝试明确设置font-family和<i>至<div>的{{1}}

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

Fontello到Wordpress

2 个答案: