我最近剛好做過這類 自己是通過把圖標設置background ?然后字體設置padding來實現的?

:before?{

? ?position:?relative;

? ?right:?5px;

? ?content:?url(../images/ ? ? ? ?.png);

//前面加圖標

：after?{

? ?position:?relative;

? ?left:?80px;

? ?content:?url(../images/ ? ? ? ?.png);

//后面加圖標

給你說幾個解決的方法：

1. 使用svg的矢量圖標，推薦阿里云的；

2. 使用canvas的h5畫布技術，這個東西絕對是未來的主流渲染，但在這快不是很實用；

3. 找一個“X”的img圖片；

4. 直接用文本“X”代替
   

用背景圖吧，不一定要用button標簽，樣式可以做成那樣的效果

<button> X </button> 這樣取巧可以加一個 X 在按鈕上

我們通常使用? 矢量圖? 也就是所謂的? 字體圖標? ,網絡上有很多? 字體圖標庫? 只要下載下來就可以使用了

有什么問題可以問我

font awesome

<button type="button">X</button>

這樣的