时间戳

首页 > 解决方案 > 移动菜单中 SVG 图标的 CSS 问题

html - 移动菜单中 SVG 图标的 CSS 问题

问题描述

我们的移动菜单中的 SVG 图标有一个奇怪的问题。尽管它们设置为 1.6em，但它们在移动版本中显得非常大。

到这里，打开汉堡菜单并点击“立即购买”下拉菜单，你会看到图标的大小

我们在 WordPress 定制器中尝试了以下 CSS，但它似乎不是那个类，这很奇怪，因为如果我们修改那个类，使用 Chrome 开发人员工具它似乎会改变。

.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}

注意：使用 !important 标记也不起作用。

标签： htmlcsswordpresssvg

解决方案

该图像的类别是class='sidr-class-icon sidr-class-before sidr-class-svg'。因此，要在 css 中选择它，您需要使用：

.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }

并不是：

.sidr-class-icon sidr-class-before sidr-class-svg { ... }


.sidr-class-icon.sidr-class-before.sidr-class-svg { 
    max-width: 15%;
    border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">

推荐阅读