Wordpress

Question

我正在使用 zurb foundation 6，在 title bar 中，我想更改 menu-icon，因为我有图像。我不确定如何执行此操作，以及如何从 wordpress.

中的自定义主题获取资产

因为，这不起作用：

.menu-icon {
  background: url('/assets/images/menu-icon.svg');
}

我试过这个，但效果不佳：

.menu-icon {
  background: get_template_directory_uri('/assets/images/menu-icon.svg');
}

不确定，如何在 css 中提取 wordpress 自定义主题的资源并更改我自己的 zurb 菜单图标？

Answer 1

.menu-icon 背景图像在 menu-icon::after 中管理，作为背景颜色和 box-shadows 的混合。因此，如果您想添加自己的图像，则必须将其添加到 menu-icon::after 并调整代码以按照您想要的方式制作图像。示例（不是一个完美的示例，但可以向您展示我的意思）：

.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url(https://foundation.zurb.com/sites/docs/assets/img/logos/zurb-logo.svg);
    background-size: 150%;
    background-position: 7px 11px;
    background-repeat: no-repeat;
}

Wordpress - 更改自定义基础菜单图标

Wordpress - changing foundation menu icon for custom one

html

css

zurb-foundation