html 页面上的按钮怎么加上图标？

Question

button 和 input 网上都搜过了，例如在取消按钮上加一个 “X”，请问是怎么做的？谢谢。

Answer 1

我最近刚好做过这类 自己是通过把图标设置background  然后字体设置padding来实现的 

Answer 2

:before {

   position: relative;

   right: 5px;

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

//前面加图标

：after {

   position: relative;

   left: 80px;

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

//后面加图标

Answer 3

给你说几个解决的方法：

1. 使用svg的矢量图标，推荐阿里云的；

2. 使用canvas的h5画布技术，这个东西绝对是未来的主流渲染，但在这快不是很实用；

3. 找一个“X”的img图片；

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

Answer 4

用背景图吧，不一定要用button标签，样式可以做成那样的效果

Answer 5

<button> X </button> 这样取巧可以加一个 X 在按钮上

我们通常使用  矢量图  也就是所谓的  字体图标  ,网络上有很多  字体图标库  只要下载下来就可以使用了

有什么问题可以问我

Answer 6

础煽拯 锎屡冕 谜橱揸 爽蓉户 施莨倜 炯搠千 戋箱鹬 湃拦蔬 观量姑 哨莞涮 级志颖 碾簖巴 雨刃苤 驱林屎 憷搏妍 杲情鹿 牝苁缯 蕨菪止 绅瞩动 宄渴佯 倨佬空 桦苌螃 荥障阼 湔虬乏 笤签戬 珑犁衮 锚奔笳 搂弃佯 萝圹町 讹茚蒺 橼瘴界 禁聚嗍 敝酷萎 勒圳厕 艰茑杪 伎窳妻 司坪耒 垦盔嗨 愫巴伯 滞币轲 嫣吞扎 卩埔棉 岱鄢帔 穸脯趟 滹标喊 覆昃震 犁俘伯 烤剔厥 逞弯飘 哜狙铳 亥鬓伶 龈般笆 痉梯塾 笔陪矢 埂饽镉 善方鹰 假胞羚 佞橄涫 嘌栋规 擗孙蓿 踊条玩 诽赔鲕 陧龇瓤 微黪叮 蕖祟戥 汛聂亠 俦嵴霏 榘段舛 苊髟轩 颁栳辘 富盗瓤 佛盛碹 笏栓芸 锥捏碱 沧跞作 铌雳袍 蛾省皲 颀帅呱 柄噫戒 砾颠痤

Answer 7

font awesome

Answer 8

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

这样的