为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

ExiaGo 2017-07-07 09:13:36

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

查看完整描述

10 回答

已采纳
?
无尽未来

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

查看完整回答
1 反对 回复 2017-07-07
  • ExiaGo
    ExiaGo
    是在button中加个 background:url(“”)吗?但是这样好像按钮多大,这个图标也会被放大。
  • 无尽未来
    无尽未来
    background-size 帮你完美解决 好用给个采纳吧
  • ExiaGo
    ExiaGo
    好像还行,再请教一下,那个图标的位置怎么改?
点击展开后面2
?
杜老C

给你说几个解决的方法:

  1. 使用svg的矢量图标,推荐阿里云的;

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

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

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

查看完整回答
2 反对 回复 2017-07-07
  • ExiaGo
    ExiaGo
    矢量图标我用过,谢啦。
  • qq_雪雨白_lzw
    qq_雪雨白_lzw
    <input type="button" >这个里边加矢量图标怎么加?
  • 杜老C
    杜老C
    如果input标签内部真的包裹不了,换一种思路,用一个html的点击块来触发函数,这样里面的样式你想咋写就咋写。 不妨可以看看一些大型很炫的网站,基本上都是用一些点击块来实现业务逻辑。
?
Tiane55555

:before {

   position: relative;

   right: 5px;

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

//前面加图标


:after {

   position: relative;

   left: 80px;

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

//后面加图标

查看完整回答
1 反对 回复 2017-07-08
?
xing_org1

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

查看完整回答
1 反对 回复 2017-07-07
  • ExiaGo
    ExiaGo
    就是图片当作按钮么?
  • xing_org1
    xing_org1
    不是图片,是background-image,url链接按个图标,然后用background-position来控制其位置,如果你想高级点写法,查一下css手册的background属性
  • ExiaGo
    ExiaGo
    嗯,谢啦,刚刚采纳的就是这样告诉我的,只能采纳一个,不好意思了。
点击展开后面1
?
披黑风的猫

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


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


有什么问题可以问我

查看完整回答
1 反对 回复 2017-07-07
  • ExiaGo
    ExiaGo
    不是这样的,就是按钮 [X 取消] X是个红色图标,假如一个保存按钮,按钮上有一个像磁盘的图标的,不知道这样您明白么?谢谢啦。
?
爱学习的他

font awesome

查看完整回答
反对 回复 2017-07-07
?
ExiaGo

//img.mukewang.com/595f1d1f00011b5601380088.jpg就是类似这样的。

查看完整回答
反对 回复 2017-07-07
?
qq_莫非

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

这样的

查看完整回答
反对 回复 2017-07-07
?
慕田峪1377340

//img.mukewang.com/595ef6680001285100400030.jpg你是说这样?把图拿出了看一下

查看完整回答
反对 回复 2017-07-07
?
snevers

建议你用bootstrap,解决方案就有了啊...

查看完整回答
反对 回复 2017-07-07

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信