Aligning header icons (wishlist/cart)

[Suite2b]

I just added my Wishlist icon to my header but it's sitting too high and made the cart icon drop down. What do I add to my code to line them up with the others? I've attached the part of the code that I added it to and a pic of what it looks like now! Thanks in advance! 

{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
            {% else %}
              <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
            {% endif %}
            <span class="vertical-divider"></span>
            {{ 'layout.customer.log_out' | t | customer_logout_link }}
          {% else %}
            {{ 'layout.customer.log_in' | t | customer_login_link }}
            <span class="vertical-divider"></span>
            {{ 'layout.customer.create_account' | t | customer_register_link }}
          {% endif %}
        </span>
      </div>
    {% endif %}
<!-- add whish list icon -->
        <a href="#swym-wishlist" class="swym-wishlist">
  			<i aria-hidden="true" focusable="false" role="presentation" class="fa fa-heart-o" style="font-size:25px;color:red"></i>
      </a>
<!--  end whish list icon -->
      <div class="grid__item {% if shop.customer_accounts_enabled %} medium-up--two-fifths {% else %} medium-up--four-fifths {% endif %} small--one-half text-right">
      <a href="{{ routes.cart_url }}" class="site-header__cart">
        {% include 'icon-cart' %}
        <span class="small--hide">
          {{ 'layout.cart.title' | t }}
          (<span id="CartCount">{{ cart.item_count }}</span>)
        </span>
      </a>
    </div>
  </div>
<hr class="small--hide hr--border">

Looks like this:

 

[michaeltheodore]

<a href="#swym-wishlist" class="swym-wishlist">
  			<i aria-hidden="true" focusable="false" role="presentation" class="fa fa-heart-o" style="font-size:25px;color:red"></i>
      </a>

The class swym-wishlist, would that be it? Try removing it and see what happens.

[Suite2b]

Yeah that's the one! Everything lines up when it's not there but I was wanting it to be on the left of the shopping cart. I just want them all to be in line with each other not at different heights 

[michaeltheodore]

What does it look like right now?

Screenshot me.

[Suite2b]

 Sorry it's tiny! Ideally I'd want to rearrange them so the search is in the middle, but if I can atleast get them inline that's good enough! 

[michaeltheodore]

I was hoping to see it without the swym class.

In any case you can move the wishlist icon to the right of the cart by moving the code.

[michaeltheodore]

Here is the revised code.

{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
            {% else %}
              <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
            {% endif %}
            <span class="vertical-divider"></span>
            {{ 'layout.customer.log_out' | t | customer_logout_link }}
          {% else %}
            {{ 'layout.customer.log_in' | t | customer_login_link }}
            <span class="vertical-divider"></span>
            {{ 'layout.customer.create_account' | t | customer_register_link }}
          {% endif %}
        </span>
      </div>
    {% endif %}
      <div class="grid__item {% if shop.customer_accounts_enabled %} medium-up--two-fifths {% else %} medium-up--four-fifths {% endif %} small--one-half text-right">
      <a href="{{ routes.cart_url }}" class="site-header__cart">
        {% include 'icon-cart' %}
        <span class="small--hide">
          {{ 'layout.cart.title' | t }}
          (<span id="CartCount">{{ cart.item_count }}</span>)
        </span>
      </a>
<!-- add whish list icon -->
        <a href="#swym-wishlist" class="swym-wishlist">
  			<i aria-hidden="true" focusable="false" role="presentation" class="fa fa-heart-o" style="font-size:25px;color:red"></i>
      </a>
<!--  end whish list icon -->
    </div>
  </div>
<hr class="small--hide hr--border">