php - fontello 不适用于 wordpress 下划线主题

Question

我在使用 Fontello 时遇到问题-everythink 在本地主机上工作，但是当我在服务器上上传主题（基于下划线创建）时，它无法正常工作（实际上它在主页上工作 - 设置为在 wordpress 中启动 - bot不在其他人身上）。

您可以在我的测试域webblaster.pl上查看它。

主页没问题-左下角有固定的“社交媒体”栏-尚未设置样式-这就是它看起来如此丑陋的原因:)

但在->fotografia-home -> kontakt底部，您可以看到一些未正确加载的字体。

在 head 部分中，我使用以下方法附加了一个 css 文件：

<link href="<?php bloginfo('stylesheet_directory'); ?>/fonts/fontello/css/fontello.css" rel="stylesheet" type="text/css">

我不知道出了什么问题 - 试图更改目录但没有奏效。

我将不胜感激任何帮助:)

Answer 1

似乎您的某些 CSS 规则会相互覆盖。

里面有/wp-content/themes/paulinakozan/fonts/fontello/css/fontello.css一条规则：

[class^="icon-"]::before, [class*=" icon-"]::before {
    display: inline-block;
    font-family: "fontello"; // <-- IMPORTANT LINE!
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    text-align: center;
    text-decoration: inherit;
    text-transform: none;
    width: 1em;
}

但是您的站点加载了另一个 css：/wp-content/plugins/modula-best-grid-gallery/scripts/modula.css?ver=4.4.2并且还有另一个规则：

[class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: "modula-icons" !important; // <-- ANOTHER IMPORTANT LINE!
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    line-height: 1;
    text-transform: none !important;
}

第二个 font-family 定义modula-icons被定义为 !important，所以它战胜了fontello! 这就是您的图标未正确加载的原因。图标根本不存在于模块图标中。

如果我在 chrome 中打开您的网站并在开发人员工具栏中禁用 modula-icons 规则，则社交图标会正确显示。