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(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);">Зарегистрироваться</button>
    </div>
    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 https://jsfiddle.net/uhs2Lqty/

    Or just the background https://jsfiddle.net/vez5ot1m/

    If there is a chance that the text will be more than 1 line, then using flexes https://jsfiddle.net/80kLaygo/ or absolute https://jsfiddle.net/fn9p3zed/

    spoiler


    button



    .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;

    }
    Anonymous

  • 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(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
    </button>
    </div>
    Anonymous

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