如何在带有CSS类的按钮中显示Bootstrap 4 SVG图标

我在按钮中使用Bootstrap 4的SVG图标。我已经将使用SVG的代码硬编码到页面的HTML中。现在我想将SVG重构为一个CSS类。我已经按照Bootstrap 4的说明创建了CSS类，但我不知道如何在按钮上显示图标。我尝试了很多变体，但都没有成功。

CSS：

.bi::before {
display: inline-block;
content: "";
background-image: url('data:image/svg+xml,<svg width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"><path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></svg>');
background-repeat: no-repeat;
background-size: 1rem 1rem;
}

HTML:

<a href="#" class="btn bi" role="button" download></a>

非常感谢你的帮助。

好吧，为了让你的代码正常工作，有几个注意事项你应该考虑一下

首先，SVG中的<path>元素没有任何结束标记，因此它将在数据属性中产生错误，并阻止图标显示
为了使SVG响应友好并填充容器中的可用空间，最好避免在SVG元素中直接使用width和height，而是使用preserveAspectRatio="none"
最好对SVG元素进行编码，而不是将其直接放在data:image/svg中，以便为交叉浏览提供有效的字符串格式。你可以用这样的工具来解决这个问题

根据上面的注释，您的最终代码应该是这样的：

.bi::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M.5%209.9a.5.5%200%200%201%20.5.5v2.5a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-2.5a.5.5%200%200%201%201%200v2.5a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2v-2.5a.5.5%200%200%201%20.5-.5z%22%20%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%2011.854a.5.5%200%200%200%20.708%200l3-3a.5.5%200%200%200-.708-.708L8.5%2010.293V1.5a.5.5%200%200%200-1%200v8.793L5.354%208.146a.5.5%200%201%200-.708.708l3%203z%22%20%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
width: 2rem;
height: 2rem;
}

<a href="#" class="btn bi" role="button" download></a>

注意：您还可以在项目中创建一个SVG文件，然后像常规图像一样在背景图像属性中直接引用它，以便于使用。

您可以在or标记中添加一个标记，并将该类应用于它。您可以尝试在不使用伪类的情况下执行此操作。此外，您还可以调整按钮中的图标，为按钮添加填充。

这里有同样的问题。在我的例子中，我在我的演示中使用了这个方法(其他方法之一(，我使用了世界上最快的php框架(我使用类似的引导按钮来更改页面中的语言(

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Custa">
<title>Document</title>
<style>
.flcn{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2Q4MDAyNyIvPjxwYXRoIGZpbGw9IiNmZmRhNDQiIGQ9Ik0xNDAuMSAxNTUuOGwyMi4xIDY4aDcxLjVsLTU3LjggNDIuMSAyMi4xIDY4LTU3LjktNDItNTcuOSA0MiAyMi4yLTY4LTU3LjktNDIuMUgxMTh6bTE2My40IDI0MC43bC0xNi45LTIwLjgtMjUgOS43IDE0LjUtMjIuNS0xNi45LTIwLjkgMjUuOSA2LjkgMTQuNi0yMi41IDEuNCAyNi44IDI2IDYuOS0yNS4xIDkuNnptMzMuNi02MWw4LTI1LjYtMjEuOS0xNS41IDI2LjgtLjQgNy45LTI1LjYgOC43IDI1LjQgMjYuOC0uMy0yMS41IDE2IDguNiAyNS40LTIxLjktMTUuNXptNDUuMy0xNDcuNkwzNzAuNiAyMTJsMTkuMiAxOC43LTI2LjUtMy44LTExLjggMjQtNC42LTI2LjQtMjYuNi0zLjggMjMuOC0xMi41LTQuNi0yNi41IDE5LjIgMTguN3ptLTc4LjItNzNsLTIgMjYuNyAyNC45IDEwLjEtMjYuMSA2LjQtMS45IDI2LjgtMTQuMS0yMi44LTI2LjEgNi40IDE3LjMtMjAuNS0xNC4yLTIyLjcgMjQuOSAxMC4xeiIvPjwvc3ZnPg==); }.flde{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZkYTQ0IiBkPSJNMTYgMzQ1YTI1NiAyNTYgMCAwIDAgNDgwIDBsLTI0MC0yMi4yTDE2IDM0NXoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMjU2IDBBMjU2IDI1NiAwIDAgMCAxNiAxNjdsMjQwIDIyLjJMNDk2IDE2N0EyNTYgMjU2IDAgMCAwIDI1NiAweiIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik0xNiAxNjdhMjU1LjUgMjU1LjUgMCAwIDAgMCAxNzhoNDgwYTI1NS40IDI1NS40IDAgMCAwIDAtMTc4SDE2eiIvPjwvc3ZnPg==); }.fles{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZkYTQ0IiBkPSJNMCAyNTZjMCAzMS4zIDUuNiA2MS4zIDE2IDg5bDI0MCAyMi4zTDQ5NiAzNDVhMjU1LjUgMjU1LjUgMCAwIDAgMC0xNzhsLTI0MC0yMi4zTDE2IDE2N2EyNTUuNSAyNTUuNSAwIDAgMC0xNiA4OXoiLz48cGF0aCBmaWxsPSIjZDgwMDI3IiBkPSJNNDk2IDE2N2EyNTYgMjU2IDAgMCAwLTQ4MCAwaDQ4MHpNMTYgMzQ1YTI1NiAyNTYgMCAwIDAgNDgwIDBIMTZ6Ii8+PC9zdmc+); }.flfr{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik01MTIgMjU2QTI1NiAyNTYgMCAwIDAgMzQ1IDE2djQ4MGEyNTYgMjU2IDAgMCAwIDE2Ny0yNDB6Ii8+PHBhdGggZmlsbD0iIzAwNTJiNCIgZD0iTTAgMjU2YTI1NiAyNTYgMCAwIDAgMTY3IDI0MFYxNkEyNTYgMjU2IDAgMCAwIDAgMjU2eiIvPjwvc3ZnPg==); }.flit{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik01MTIgMjU2QTI1NiAyNTYgMCAwIDAgMzQ1IDE2djQ4MGEyNTYgMjU2IDAgMCAwIDE2Ny0yNDB6Ii8+PHBhdGggZmlsbD0iIzZkYTU0NCIgZD0iTTAgMjU2YTI1NiAyNTYgMCAwIDAgMTY3IDI0MFYxNkEyNTYgMjU2IDAgMCAwIDAgMjU2eiIvPjwvc3ZnPg==); }.flro{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZkYTQ0IiBkPSJNMjU2IDBjLTMxLjMgMC02MS4zIDUuNi04OSAxNkw5IDI1NmwxNTggMjQwYTI1NS40IDI1NS40IDAgMCAwIDg5IDE2YzMxLjMgMCA2MS4zLTUuNiA4OS0xNmwxNTgtMjQwTDM0NSAxNmEyNTUuNSAyNTUuNSAwIDAgMC04OS0xNnoiLz48cGF0aCBmaWxsPSIjZDgwMDI3IiBkPSJNNTEyIDI1NkEyNTYgMjU2IDAgMCAwIDM0NSAxNnY0ODBhMjU2IDI1NiAwIDAgMCAxNjctMjQweiIvPjxwYXRoIGZpbGw9IiMwMDUyYjQiIGQ9Ik0xNjcgNDk2VjE2YTI1NiAyNTYgMCAwIDAgMCA0ODB6Ii8+PC9zdmc+); }.flru{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiMwMDUyYjQiIGQ9Ik00OTYgMzQ1YTI1NS40IDI1NS40IDAgMCAwIDAtMTc4SDE2YTI1NS41IDI1NS41IDAgMCAwIDAgMTc4bDI0MCAyMi4zTDQ5NiAzNDV6Ii8+PHBhdGggZmlsbD0iI2Q4MDAyNyIgZD0iTTI1NiA1MTJhMjU2IDI1NiAwIDAgMCAyNDAtMTY3SDE2YTI1NiAyNTYgMCAwIDAgMjQwIDE2N3oiLz48L3N2Zz4=); }.flus{ content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIgZmlsbD0iI2VlZSIvPjxwYXRoIGZpbGw9IiNkODAwMjciIGQ9Ik0yNDQuOSAyNTZINTEyYzAtMjMuMS0zLTQ1LjUtOC44LTY2LjhIMjQ0LjlWMjU2em0wLTEzMy42aDIyOS41YTI1Ny40IDI1Ny40IDAgMCAwLTU5LTY2LjdIMjQ0Ljl2NjYuN3pNMjU2IDUxMmM2MC4yIDAgMTE1LjYtMjAuOCAxNTkuNC01NS43SDk2LjZBMjU0LjkgMjU0LjkgMCAwIDAgMjU2IDUxMnpNMzcuNiAzODkuNmg0MzYuOGEyNTQuNSAyNTQuNSAwIDAgMCAyOC44LTY2LjhIOC44YTI1NC41IDI1NC41IDAgMCAwIDI4LjggNjYuOHoiLz48cGF0aCBmaWxsPSIjMDA1MmI0IiBkPSJNMTE4LjYgNDBoMjMuM2wtMjEuNyAxNS43IDguMyAyNS42LTIxLjctMTUuOC0yMS43IDE1LjggNy4yLTIyYTI1Ny40IDI1Ny40IDAgMCAwLTQ5LjcgNTUuM2g3LjVsLTEzLjggMTBhMjU1LjYgMjU1LjYgMCAwIDAtNi4yIDExbDYuNiAyMC4yLTEyLjMtOWEyNTMuNiAyNTMuNiAwIDAgMC04LjQgMjBsNy4zIDIyLjNINTBMMjguNCAyMDVsOC4zIDI1LjVMMTUgMjE0LjZsLTEzIDkuNUEyNTguNSAyNTguNSAwIDAgMCAwIDI1NmgyNTZWMGMtNTAuNiAwLTk3LjcgMTQuNy0xMzcuNCA0MHptOS45IDE5MC40bC0yMS43LTE1LjgtMjEuNyAxNS44IDguMy0yNS41TDcxLjcgMTg5aDI2LjhsOC4zLTI1LjUgOC4zIDI1LjVoMjYuOGwtMjEuNyAxNiA4LjMgMjUuNXptLTguMy0xMDBsOC4zIDI1LjQtMjEuNy0xNS43LTIxLjcgMTUuNyA4LjMtMjUuNS0yMS43LTE1LjdoMjYuOGw4LjMtMjUuNiA4LjMgMjUuNmgyNi44bC0yMS43IDE1Ljd6bTEwMC4xIDEwMGwtMjEuNy0xNS44LTIxLjcgMTUuOCA4LjMtMjUuNS0yMS43LTE1LjhoMjYuOGw4LjMtMjUuNSA4LjMgMjUuNWgyNi44TDIxMiAyMDVsOC4zIDI1LjV6bS04LjMtMTAwbDguMyAyNS40LTIxLjctMTUuNy0yMS43IDE1LjcgOC4zLTI1LjUtMjEuNy0xNS43aDI2LjhsOC4zLTI1LjYgOC4zIDI1LjZoMjYuOEwyMTIgMTMwLjN6bTAtNzQuN2w4LjMgMjUuNi0yMS43LTE1LjhMMTc3IDgxLjNsOC4zLTI1LjZMMTYzLjUgNDBoMjYuOGw4LjMtMjUuNUwyMDcgNDBoMjYuOEwyMTIgNTUuN3oiLz48L3N2Zz4=); }
/*
generated by me with php $flagencoded= base64_encode($svgimageloadedfrompath);
then with echo,fwrite,content output in some other way I generate
echo '.classname1{ content:url(data:image/svg+xml;base64,'.$flagencoded.');}';
so I got what you reading up
in my case all svg files are from github: flags public domain(free to anyone to use)
*/
p{
width: 30px;
height:30px;
}
</style>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>

<div class="pb-3">
<div class="container">
<div class="row">
<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="fles"></p>
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flfr"></p>
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flus"></p>    
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flit"></p>
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flde"></p>   
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flcn"></p>    
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flro"></p>   
</button>
</div>

<div class="col">
<button class="btn btn bg-info" type="submit">
<p class="flru"></p>
</button>
</div>
</div>
</div>
</div>


</body>
</html>

相关内容

最新更新

热门标签：