如何在 zk 按钮中添加自定义图标答案

【问题标题】：How to add custom icon in zk button如何在 zk 按钮中添加自定义图标
【发布时间】：2017-08-17 08:18:57
【问题描述】：

如何在按钮中添加和->

例如，如果我有名为 Continue-> 和

的按钮

示例按钮用于继续

【问题讨论】：

标签： button icons zk

【解决方案1】：

您可以使用 font awesome 和 CSS before 和 after 伪元素选择器来实现这一点，这与 zk 无关。

.z-button.arrow-right-button:after {
    // find your icon in font awesome
    content: "\f061";

    // move and style it as you prefer
    vertical-align: bottom;         
    margin-left: 5px;
    color: rgb(99, 99, 99);

    // stuff necessary to make it work nicely
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: medium;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    transform: translate(0,0);  
}

使用 zk 的元素结构的另一种可能性是操纵图标元素的样式（如果您使用图标作为箭头）：

.z-button>.z-button-image {
    float: right;
    margin-top: -1px;
    margin-left: 4px;
}

【讨论】：