title: How to style dropdown buttons using Zurb Foundation 5?
body: <p>I am using Zurb Foundation 5 with Sass mixins and I want to change the style of the dropdown arrow. I am pretty confident that it lies somewhere inside of here but I'm not sure what it is:</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>Here is what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/e3hTk.png" alt="enter image description here"></p>
  
  <p>And I want the dropdown arrow to look more like this:</p>
  
  <p><img src="https://i.stack.imgur.com/xb7J5.png" alt="enter image description here"></p>
  
  <p>How can I achieve this? Thanks in advance!</p>
  
  <p>===== <strong>EDIT</strong> =====
  With this scss:</p>
  
  <pre><code>.dropdown.button:before{
    width: 15px;
    height: 15px;
    border: none;
    background: url("../images/dropdown.png") no-repeat;
  }
  </code></pre>
  
  <p>And this html:</p>
  
  <pre><code> &lt;a href="#" data-dropdown="drop" class="button login dropdown width-limit"&gt;fake@emailaddress.com&lt;/a&gt;&lt;br&gt;
        &lt;ul id="drop" data-dropdown-content class="f-dropdown"&gt;
  </code></pre>
  
  <p>The button looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/AUxK2.png" alt="enter image description here"></p>
  
  <p>How do I move the arrow now?
  Updated jsfiddle:<a href="http://jsfiddle.net/Y4jDW/" rel="nofollow noreferrer">http://jsfiddle.net/Y4jDW/</a></p>