CODEWITHSUNDEEP
cssangularjsfont-awesome
hanu
hanu

Reputation: 397

select options with font awesome icons

I am displaying font awesome icons in row. when I click an icon it takes an action. and also I was trying to seelct an icon then it should show the option,when I click the option it should take an action. Here is my code.

<div  class="iconsInfo">
        <div>             
            <div ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
                <i class="fa fa-reply"></i>
            </div>
            <div ng-if="isReplyAll()"ng-click="replyAll()" class="iconRow"  title="Reply All">
                <i class="fa fa-reply-all"></i>
            </div>
            <div ng-if="isForward()" ng-click="forwardMessage()" class="iconRow"  title="Forward">
                <i class="fa fa-reply fa-flip-horizontal"></i>
            </div>
            <div ng-if="!isDeleted()" ng-click="deleteMessage()" class="iconRow"  title="Delete Message">
                <i class="fa fa-trash"></i>
            </div>

            <div ng-show="canMoveToFolder()" class="iconRow">
                <i class="fa fa-folder-o"> </i> 

            </div>

Here when I click on reply icon it calls replyMessage .when I click on folder icon it should show the options like sentToFolder1,sentToFolder2,when I click senttoFolder1 it calls an action. how to achieve this using fontawesome icons.

Upvotes: 0

Views: 547

Answers (1)

Brian
Brian

Reputation: 5049

Using a button over a div would be a solution:

<button ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
    <i class="fa fa-reply"></i>
</button>

You may need to change your iconRow class a bit, depending on what it is. Based on the name, I imagine perhaps the wrapper would be a good place for the iconRow styling.

Upvotes: 1

Related Questions