logo标签列表

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

htmlcsssvgbuttonicons
3
我将使用Bootstrap 4的SVG图标来制作我的按钮。我已经在页面的HTML中硬编码了SVG代码，现在我想将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>

非常感谢您的帮助。

3个回答
3

为了让您的代码正常工作，有几点需要注意。

  • 首先，在您的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文件，然后像普通图像一样直接引用它作为背景图片属性，以便更轻松地使用。

0

你可以在 <a> 标签或者 <button> 标签内添加一个 <i> 标签，并给它应用相应的类。你可以尝试不使用伪类来实现这个效果。另外，你还可以通过给按钮添加内边距来调整按钮中的图标。

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/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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接