【问题标题】:Star ratings shows 'SSSSS' instead of star symbol - woocommerce星级评分显示“SSSSS”而不是星号-woocommerce
【发布时间】:2019-11-25 14:31:00
【问题描述】:

我的产品页面的屏幕截图,显示 SSSSS 代替星星。我刚刚用最新版本升级了我的主题和 woocommerce 并开始面临这个问题。在此之前一切正常。

我已搜索过该问题,但找不到任何解决方案。可能是什么问题?我对 woocommerce 有点陌生

我检查了css 文件并显示'\53\53'\73\73 符号我需要用\e021 替换它吗?

更新:

这个代码已经在我的woocommerce.scss中了

    /**
     * Star ratings
     */
    .star-rating {
        float: right;
        overflow: hidden;
        position: relative;
        height: 1em;
        line-height: 1;
        font-size: 1em;
        width: 5.4em;
        font-family: 'star';

        &::before {
            content: '\73\73\73\73\73';
            color: darken( $secondary, 10% );
            float: left;
            top: 0;
            left: 0;
            position: absolute;
        }

        span {
            overflow: hidden;
            float: left;
            top: 0;
            left: 0;
            position: absolute;
            padding-top: 1.5em;
        }

        span::before {
            content: '\53\53\53\53\53';
            top: 0;
            position: absolute;
            left: 0;
        }
    }

    .woocommerce-product-rating {
        @include clearfix();
        line-height: 2;
        display: block;

        .star-rating {
            margin: 0.5em 4px 0 0;
            float: left;
        }
    }

【问题讨论】:

  • "我检查了 css 文件并显示 '\53\53' & \73\73 符号我需要用 \e021 替换它吗?"出色地?你试过吗?发生了什么?
  • 我在 firebug 中尝试过,但没有成功。
  • Firebug 并不总是与更改 CSS 和加载页面相同。您是否确认字体 正在 加载?字体未加载或您试图显示字体中不存在的字符(即:对所需图标使用错误的字符)。
  • 网站不加载 SCSS 文件。尝试像我之前建议的那样更改符号并重新编译您的 CSS 样式表。
  • @helgatheviking 正如你所说,我已经更新了 CSS 样式表中的符号,但仍然无法正常工作。

标签: php css woocommerce


【解决方案1】:

我认为在您的情况下,css 中的 .star-rating 类丢失或替换了 font-family。如果是这样,那么在你的 css 中添加.star-rating{font-family: star} 并且必须检查它没有被其他人覆盖。

【讨论】:

  • 我已经更新了我的问题。 .star-rating{font-family: star} 已经存在了。
【解决方案2】:

虽然我没有关于您使用的主题的任何信息,但我认为您缺少的字体包含所有称为 glyphs 的奇怪字符。

请查看您的 wp-header.phpfunctions.php 内部以了解有关字体的更多信息,并检查您是否需要其中的字体wp-content/themes/your_theme/some_folder_with_fonts。

另外请清除您的缓存。它可能具有相同的 CSS 文件名,而 css 的内容不同并且现在字体的“位置”(url)不同。

为此,请在您正在访问的页面上按 CTLR+SHIFT+R。最简单的事情。大问题。去过很多次了。

编辑:在原始主题中添加了缺少的带有字体声明的 CSS 部分

这是您的 CSS 文件中缺少的代码:

@font-face {
    font-family: star;
    src: url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.eot);
    src: url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix) format('embedded-opentype'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.woff) format('woff'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.ttf) format('truetype'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.svg#star) format('svg');
    font-weight: 400;
    font-style: normal
}

这来自原始主题。

如果可行,请告诉我。

【讨论】:

  • 我正在使用electro 主题。在我将主题更新到最新版本之前,它运行良好,所以我需要添加字体吗?
  • 我在发布这个问题之前已经清除了很多时间缓存,但不幸的是它还没有工作。
  • 好的,在这种情况下,我想我需要向您要一个 URL 来查看,否则我看不到任何帮助。对不起。
  • @font-face { font-family: 'star'; src: url("../../plugins/woocommerce/assets/fonts/star.eot"); src: url("../../plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("../../plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("../../plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("../../plugins/woocommerce/assets/fonts/star.svg#star") format("svg"); font-weight: normal; font-style: normal; } style.css 中已有此代码
  • 在这种情况下,请检查您的字体路径是否正确。我检查了控制台,得到了 4 次 404。似乎你在../../plugins/woocommerce/assets/fonts 中没有这些字体。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-08-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-17
  • 1970-01-01
  • 2021-08-01
相关资源
最近更新 更多