Icons not working


#1

HI. I’m trying to get some icons to display in a footer. Looking at the docs here I should just have to insert
<icon heart></icon>
to display a heart icon. This isn’t working. I’m getting nothing. I have downloaded and added; using bower the ionicons from ionicons.com. These are working but there are some other icons on the ionic.io website that I’d like to use. I can’t get these to load and the docs say to use the icon tag like above.
http://ionicframework.com/docs/v2/resources/ionicons/

Any ideas how to get these working in my app please??

Thanks


#2

You tagged your question as ionic not “ionic 2”, so just to check you’re not trying to use ionic 2 syntax with ionic 1, right?


#3

I am able to see the heart icon in a v2.0-alpha.45 app using this syntax. If you are trying to use a v1.0 app please use the syntax here:

<i class="icon ion-heart"></i>
<i class="icon ion-ios-heart"></i>

You can check your version by running ionic info from within the project folder. If this is a v2 error, let me know.


#4

Can someone provide guidance on how to implement cross-platform icons using the v1.0 syntax? For example, how would you show the Android download icon on Android (md-download) and ios download icon on iOS? (ios-download). My current solution is to use the ionic.Platform service and do ng-show/ng-hide logic. Many thanks in advance.


#5

Trying to create a login page with icons and input boxes along side a login button , this was what I used, very simple only after you have figured it out.

<ion-content padding>
<h2> Welcome to Your APP</h2>
  <ion-row>
     <ion-icon name="person"></ion-icon>
	<ion-input type="text" placeholder="Username">
	</ion-input>
  </ion-row>

  <ion-row>
    <ion-icon name="lock"></ion-icon>
	<ion-input type="password" placeholder="Password">
	</ion-input>
  </ion-row>
<button ion-button icon-left full>
  LOG IN
</button>


</ion-content>