我使用的是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>你猜怎么着?未显示任何内容。谁能告诉我我哪里做错了?我找不到哪里出了问题。
谢谢,克里斯
发布于 2015-03-07 06:46:21
您是否尝试过将<i>和<div>的font-family显式设置为fontello
div {font-family:'fontello'}由于您已经在使用另一个图标字体库,这可能是问题所在
发布于 2016-11-10 22:15:27
确保@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');
}
https://stackoverflow.com/questions/28904881
复制相似问题