0

I have an icon inside of a button tag. I also have a select drop down and I want to place its arrow icon directly inline with the heart icon. I thought I could do this with regular css positioning, but unless I remove the select icon from inside the button tag altogether, the icon won't move the way I need it to with standard css positioning.

        <button class="toolbarButtons" ion-button >

                <ion-select id="select">
                  <ion-option value="NY">New York</ion-option>
                  <ion-option value="BO">Boston</ion-option>
                 </ion-select>

              <ion-icon name="heart">Change City</ion-icon>
     </button>
Spilot
  • 1,495
  • 8
  • 29
  • 55
  • 1
    Can you please also share the CSS you have tried. And it will be much better if you can create a snippet or demo showing the issue – Kiran Dash Jun 03 '17 at 05:47

1 Answers1

1

You'll have more control of Ion Icons if you use the class version. That way you can change it however you like.

Example:

    <tag class="ion-heart"> text </tag>

You can use this class to customize sizing, or create your own custom one.

For display a heart with an arrow inline, you can look at this website and see if it's of any use to you. http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/ It's using a different icon font, but it should help.

Krista A.
  • 96
  • 2
  • 10