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

Question

如何添加< - 在按钮和- >

例如，如果我有按钮称为Continue->和< - 取消

样本按钮将用于继续

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