如何在按钮文本旁边添加图标？

Question

我想实现如图所示的按钮，但我不确定如何自信地做到这一点。

我试过的代码如下所示：

        background-color: hsl(0, 0%, 48%);
        border-radius: 30px;
        text-align: center;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
      }

<button class="bookmark">
              <svg width="56" height="56" xmlns="http://www.w3.org/2000/svg">
                <g fill="none" fill-rule="evenodd">
                  <circle fill="#2F2F2F" cx="28" cy="28" r="28" />
                  <path fill="#B1B1B1" d="M23 19v18l5-5.058L33 37V19z" />
                </g></svg
              >Bookmark
            </button>

Answer 1

这段代码得到了你想要的结果。

.bookmark {
    background-color: hsl(0, 0%, 83%);
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
    border: none;
}

h1 {
    padding: 0px 20px;
}

svg {
    transform: scale(1.2);
}

<button class="bookmark">
    <svg width="56" height="56" xmlns="http://www.w3.org/2000/svg">
        <g fill="none" fill-rule="evenodd">
            <circle fill="#2F2F2F" cx="28" cy="28" r="28" />
            <path fill="#B1B1B1" d="M23 19v18l5-5.058L33 37V19z" />
        </g>
    </svg>
    <h1>Bookmark</h1>
</button>