如何使用Zurb Foundation 5设置下拉按钮的样式？

Question

我正在使用Zurb Foundation 5和Sass mixins，我想改变下拉箭头的样式。我非常有信心它位于这里的某个地方，但我不确定它是什么：

// Dropdown Buttons

// $include-html-button-classes: $include-html-classes;

// We use these to set the color of the pip in dropdown buttons
// $dropdown-button-pip-color: #fff;
// $dropdown-button-pip-color-alt: #333;

// $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7);
// $button-pip-med: rem-calc(9);
// $button-pip-lrg: rem-calc(11);

// We use these to style tiny dropdown buttons
// $dropdown-button-padding-tny: $button-pip-tny * 7;
// $dropdown-button-pip-size-tny: $button-pip-tny;
// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);

// We use these to style small dropdown buttons
// $dropdown-button-padding-sml: $button-pip-sml * 7;
// $dropdown-button-pip-size-sml: $button-pip-sml;
// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);

// We use these to style medium dropdown buttons
// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);

// We use these to style large dropdown buttons
// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);

这就是我所拥有的：

我希望下拉箭头看起来更像这样：

我怎样才能做到这一点？提前谢谢！

===== 编辑 ===== 有了这个scss：

.dropdown.button:before{
  width: 15px;
  height: 15px;
  border: none;
  background: url("../images/dropdown.png") no-repeat;
}

这个html：

 <a href="#" data-dropdown="drop" class="button login dropdown width-limit">fake@emailaddress.com</a><br>
      <ul id="drop" data-dropdown-content class="f-dropdown">

按钮如下所示：

如何移动箭头？ 更新了jsfiddle：http://jsfiddle.net/Y4jDW/

Answer 1

您的示例中没有默认箭头фы，但您可以覆盖Foundation的样式。只需添加以下样式：

.dropdown.button:before{
  width: 10px;  //width of your arrow
  height: 10px; //height of your arrow
  border: none;
  background: url(...) no-repeat;  //url for image
}

Answer 2

您可以在css / foundation.css行中找到该类：1261

这是原始代码：

    .top-bar-section .has-dropdown > a:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 5px;
    border-color: rgba(168, 168, 168, 1) transparent transparent transparent;
    border-top-style: solid;
    margin-top: -2.5px;
    top: 22.5px; }

你可以试试这个：

    .top-bar-section .has-dropdown > a:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: none;
    background-image: url(img/arrow.png) no-repeat;
    margin-top: -2.5px;
    top: 22.5px; }

祝你好运！