[英]How to replace an SVG icon with a font based icon (Font Awesome/Ion)?
我有一个显示SVG图标的下拉列表,而其他所有列表则显示带有基于字体的图标的按钮(在本例中为ion-icon)。 当然,我希望所有下拉列表看起来都一样。
我尝试修改CSS代码并浏览了一些.js和.php文件,但没有成功。
SVG图标的代码
<svg class="dd__expandIcon" viewBox="0 0 9 15" width="9px" height="15px">
<path d="M315,1318.04l-4.5,4.96-4.5-4.96,0.944-1.04,3.557,3.92,3.553-3.92,0.944,1.04m-9-5.08,4.5-4.96,4.5,4.96-0.944,1.04-3.557-3.92-3.553,3.92L306,1312.96" transform="translate(-306 -1308)"></path>
</svg>
.dd__expandIcon {
width: 9px;
height: 15px;
flex-shrink: 0;
fill: #bdbdbd;
margin-left: 10px
}
离子图标代码
<button type="button" class="reactiveToggleBtn___cQAWH">
<i class="ion-chevron-down"></i>
</button>
.reactiveToggleBtn___cQAWH i {
font-size: 13px;
color: #484848;
}
您可以在此处直接查看实际结果(“Thèmede laséance”下拉列表)与预期结果(所有其他下拉列表)的对比:site
谢谢你的帮助!
我终于找到了解决问题的办法。
隐藏svg:
svg.dd__expandIcon {visibility:hidden;}
将背景图像添加到选择框
.dd__selectControl {background: #f1f1f1 url('/wp-content/uploads/dropdown2.png') right no-repeat!important;}
也许不是执行此操作的正确方法,但如上所述,它可以解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.