javascript - 如何将自定义大小的图标放入 jQuery UI 按钮中？

Question

我正在尝试使用与标准图标大小不同的自定义图标创建 jQuery UI 按钮，但是在使这些自定义图标正确适合按钮时遇到了困难。下面的代码演示了我如何<button>用 50x17 像素的图标装饰所有元素，我还创建了一个相应的fiddle。

Javascript：

$('button').button({icons: {primary: 'login-icon'}, text: false});

CSS：

.ui-button .ui-icon.login-icon {
    background-image: url(http://i.imgur.com/qLgpl.png);
    width: 50px;
    height: 17px; 
}

问题是如何使按钮与这种自定义大小的图标配合在一起，即使图标正确放置在（垂直/水平对齐）父按钮内？

score 2 · Accepted Answer

在研究了 jQuery UI 生成的 CSS 之后，我找到了一个解决方案。我发现诀窍在于span使用以下 CSS 规则将包含图标的图标定位在其父级（按钮）内：

position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -8px;

定位规则 ( position, left, top) 的意思是，在没有边距的情况下，图标的左边缘应该是父级宽度的 50%，上边缘应该是父级高度的 50%，即图标的左上角将是smack 在按钮的中间，如图所示：

居中的图标

在负边距的帮助下，图标向左偏移一半长度，向上偏移一半高度，以便它有效地位于父元素的中心。8 像素的值是由于 jQuery 的图标是 16x16 像素。

然后我必须进行的调整是根据我的图标 (50x17) 的大小将边距修改为 25 和 8 像素：

position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -8px;

score 1 · Accepted Answer

1

在即将发布的 CSS 版本中，您可以使用transform:scale(2,2); JSFiddled对其进行扩展

于 2013-06-18T16:50:50.337 回答

2 回答 2