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

Question

如何在按钮中添加＆lt; - ， - ＆gt;

例如，如果我有名为继续 - ＆gt; 的按钮，＆lt; -Cancel

示例按钮用于继续

Answer 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;
}