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

问题描述 投票：0回答：4

我在按钮中使用 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>

非常感谢您的帮助。

html css svg button icons
4个回答
4
投票

好吧，为了让你的代码正常工作，你应该考虑一些注意事项。

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

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

.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 文件，然后像常规图像一样直接在背景图像属性中引用它，以方便使用。

0
投票

您可以在 或 标签内添加标签并将类应用于它。您可以尝试在没有伪类的情况下执行此操作。您还可以调整按钮中的图标，为按钮添加填充。

0
投票

这里有同样的问题。就我而言，我在演示中使用了这种方法（其他方法之一），并使用了世界上最快的 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/[email protected]/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>
0
投票

你可以尝试一下：

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .btn .chevron{
vertical-align:middle;
background:#fff;
display: inline-table;
width:30px;
height:32px;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E")
}
</style>
  
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
 <button class="btn addto btn-danger m-4"><span class="chevron"></span> Alert Danger</button>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.