button按钮（icon）

html-css024

button按钮（icon）,第1张

    上一节，我们已经基本实现了按钮组件，但是还不够完善，因为我们的组件并未内置图标，像antd就可以通过icon属性显示一个图标按钮。这一节就来实现它 需求分析    添加icon属性，用来显示不同的icon图标，并且支持传递字符串或对象，对象形式将用来进行更多控制       添加loading属性，标识按钮加载中 基本实现      增加类型定义       增加类名标识                 当icon或loading属性存在时，增加su-btn-icon标识，对应的css如下       处理icon渲染                 该函数将在按钮文本前被调用，即       使用

首先，打开CSSIcon网站，在搜索框中输入关键字，可以查找到相关的图标，也可以通过分类查找，比如社交媒体、电子邮件、购物等，还可以通过标签查找，比如箭头、锁、礼物等，这样就可以找到自己想要的图标了。

在input框结尾加一个icon图标可以使用CSS来实现，通常可以将该图标作为背景图片加入input框中，然后再设置input框的padding属性以适应该图标大小，最后设置背景定位属性，使背景图片在input框末尾显示即可。