Different hrefs for icon-left and icon-right

ionic-v1
1

Hello I’m trying to create a list item with an icon-left, some text, and an icon-right. I’d like the icons to be clickable and href to different destinations. However when I remove the outer href and try to apply an href to each of the icons it breaks. It’s like the icons forget to behave like icons in their respective places defined by the container’s class.

This works…

<a class="item item-icon-left item-icon-right" href="#">
  <i class="icon ion-chatbubble-working"></i>
  Call Ma
  <i class="icon ion-ios7-telephone-outline"></i>
</a>

This doesn’t but I’d like it to…

<div class="item item-icon-left item-icon-right">
  <a href=""><i class="icon ion-chatbubble-working"></i></a>
  Call Ma
  <a href=""><i class="icon ion-ios7-telephone-outline"></i></a>
</div>
2

It’s because the class-selectors that moves the icons left and right uses nth-child. They’re looking for the first/last icon-class, but since you don’t have any icons that are direct children of the .item, the classes isn’t applied.
(Hmmmm, do you understand? I’m not sure I understand what I just wrote…)

Maybe you could copy the styling from the icons when its working and then add it to the a-tag, or just move the icon-class onto the a-tag

3

Thanks for the comment @tobbe. I just found a workaround.

<div class="item item-icon-left item-icon-right">
  <i ng-click="redirect('#')" class="icon ion-chatbubble-working"></i>
  Call Ma
 <i ng-click="redirect('#')" class="icon ion-ios7-telephone-outline"></i>
</div>

and this in the controller

  $scope.redirect = function(url) {
    document.location.href = url;
  }