我试图在我的标题部分使用搜索图标，但它没有显示。我试了所有方法，但还是没有成功!
我添加了AddType image/svg+xml .svg .svgz，我尝试了AddType image/svg+xml svg svgz和我在网上发现的其他几行，但仍然没有机会。谁能告诉我现在该怎么做?然而，我的其他svg都显示出来了，这很奇怪!
.SearchIcon{
background-image: url(icons/search-solid.svg);
background-repeat: no-repeat;
display: inline-block;
margin-right: 15px;
width: 20px;
height: 20px;
vertical-align: middle;
filter: invert(32%) sepia(24%) saturate(298%) hue-rotate(132deg) brightness(98%) contrast(89%);
}<a href="#"><i class="SearchIcon"></i></a>和这里是我的SVG文件:
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
不使用它作为背景图像，您可以直接将svg标签插入正文:
#my-svg{
height: 50px;
width: 50px;
color: #2c676f;
}<html>
<head>
</head>
<body>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="my-svg"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
</body>
</html>使用CSS可以改变大小或颜色，如图所示。