How to place an icon next to the text in a button?

  • 0
    Hello everyone! How to place an icon next to the text in a button?

    The icon needs to be inserted through background-image, and this causes a problem. There are no problems with img, but if done through the img tag, it will be wrong because the icon does not carry any significance. How to be in such a situation? Maybe you can implement it through background-image?
    <div style="width: 100%; background-color: #fff;">
    	<button style="width: 100%;height: 50px;background-size: 20px 20px;
    	background-repeat: no-repeat; background-position: right 0 center;
    	background-image: url(;">Зарегистрироваться</button>
    JavaScript Emily Briggs, Nov 18, 2020

  • 2 Answers
  • 0
    Such icons are inserted either

    - background for the button

    - pseudo-element

    - background for pseudo-element

    For example, the background for the pseudo

    Or just the background

    If there is a chance that the text will be more than 1 line, then using flexes or absolute



    .btn :: after {

    content: "";

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    height: 20px;

    margin-left: 0.3em;

    background: violet url ('picture here') no-repeat center / contain;


  • 0
    If you answer the question, then after the text there should be a slot for this icon.

    An empty div that will have this background specified.

    This way the div will always follow the text. You can set text indentation, dimensions, and other styles to it.

    div and not span simply because span is still a text wrapper. And the icon is not text.

    <div style="width: 100%; background-color: #fff;">
    <button style="width: 100%;height: 50px;">
    <div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(;"></div>

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!