Adding an icon to the right of an Avatar - Ionic

2019-09-14 19:12发布

问题:

I'm looking ti add an icon to the right of an ionic avatar list item.

My code:

<ion-item class="animated flipInX item-divider gold" ng-show="(myArray.length > 0)">My Stuff</ion-item>
        <div ng-repeat="item in array">
          <ion-list>
            <ion-item class="animated flipInX item-avatar" ng-click="showAcceptRequest(item)">
              <img ng-src={{item['Picture']}}>
              <h2>{{item['SenderName']}}</h2>
              <p>{{item['EntityName']}}</p>
            </ion-item>
        </div>
        </ion-list>

This shows an avatar picture with there name and some sub-info. I'd like to add an ionicon to the right of this cell but my positioning is all off. Can someone shed some light?

Such as:

<i class="icon ion-ios-telephone-outline"></i>

JSFiddle:

http://jsfiddle.net/m3x6nb1d/8/

Basically want the icon to be level on the right of the table cell...

回答1:

This worked for me, pasting my example, try to re-create

<ion-content>
    <ion-list class="item-icon-right">
        <ion-item>
                <i class='icon ion-social-facebook'> </i> Facebook
        </ion-item>
    </ion-list>
<ion-content>

So yeah, item-icon-right class should do the job.

Works with normal icons,if it doesn't work with images then you should see how to add image to the right with img align attribute. Example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_align