文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将SVG图标替换为基于字体的图标(字体很好/离子)？

问如何将SVG图标替换为基于字体的图标(字体很好/离子)？
EN

Stack Overflow用户

提问于 2019-04-24 12:43:06

回答 2查看 124关注 0票数 0

我有一个下拉列表，它显示一个SVG图标，而其他所有的列表都显示一个带有基于字体的图标的按钮(在本例中是离子图标)。当然，我希望所有下拉列表看起来都一样。

我尝试过修改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ème de la séance")和预期结果(所有其他下拉列表)：

谢谢你的帮忙!

css

reactjs

svg

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-24 14:23:51

我终于找到了一种方法来达到这个目的。

隐藏svg：

svg.dd__expandIcon {visibility:hidden;}

将背景图像添加到选择框中

.dd__selectControl {background: #f1f1f1 url('/wp-content/uploads/dropdown2.png') right no-repeat!important;}

也许这并不是正确的方法，但正如所说的那样，这才是诀窍。

票数 0

Stack Overflow用户

发布于 2019-04-24 13:19:35

您可以将SVG图标文件转换为字体基图标

https://icomoon.io/app

进口图标
选择要转换的图标。
单击生成字体

有关更多信息，请查看以下链接：How to convert .svg files to a font?

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55830319

复制

相似问题

问如何将SVG图标替换为基于字体的图标(字体很好/离子)？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将SVG图标替换为基于字体的图标(字体很好/离子)？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将SVG图标替换为基于字体的图标(字体很好/离子)？
EN