Блог

Главная - Вопросы по программированию - Как мне отобразить значок начальной загрузки 4 SVG в кнопке с классом CSS?

Как мне отобразить значок начальной загрузки 4 SVG в кнопке с классом CSS?

#html #css #svg #button #icons

#HTML #css #svg #кнопка #Значки

Вопрос:

Я использую значки SVG Bootstrap 4 в своих кнопках. У меня есть код, работающий с SVG, жестко закодированный в HTML страницы. Теперь я хочу преобразовать SVG в класс CSS. Я следовал инструкциям начальной загрузки 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>

Мы очень ценим вашу помощь.

Ответ №1:

Ну, чтобы заставить ваш код работать, есть пара замечаний, которые вы должны рассмотреть.

  • Во-первых, <path> элемент в вашем SVG не имеет закрывающего тега, поэтому он выдаст ошибку в атрибуте данных и не позволит отображать значок.
  • Чтобы сделать ваш SVG адаптивным и удобным для него и заполнить доступное пространство в контейнере, лучше избегать использования width и height непосредственно в элементе SVG и использовать preserveAspectRatio="none" вместо этого.
  • Лучше закодировать ваш элемент SVG вместо того, чтобы помещать его непосредственно в data:image/svg , чтобы обеспечить допустимый формат строки для целей перекрестного просмотра. Вы можете использовать подобные инструменты для этой цели.

Согласно приведенным выше примечаниям, ваш окончательный код должен быть примерно таким:

 .bi::before {
  content: "";
  display: inline-block;
  background-image: url('data:image/svg xml,');
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
}  
 <a href="#" class="btn bi" role="button" download></a>

ПРИМЕЧАНИЕ: вы также можете создать SVG-файл в своем проекте, а затем напрямую ссылаться на него в свойстве фонового изображения, как на обычные изображения, для упрощения использования.

Ответ №2:

Вы можете добавить тег внутри тега или и применить к нему класс. Вы можете попробовать сделать это без псевдокласса. Также вы можете настроить значок в кнопке, добавив отступы к кнопке.

Ответ №3:

тот же вопрос here.in мой случай я использовал этот метод (один из других) в своей демонстрации с моим самым быстрым 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>