How to create Angular JS ON-OFF Switch

Question

I am trying to create ON-OFF switch by referring the link

Here i can not use the FontAwesome reference in the index.html file and what i have done is i have copied the font-awesome-css file in my project. But the switch ON-OFF button is not getting displayed.

Here i have deleted the reference from index.html and the content of font-awesome.min.css is copied on my style.css file My requirement is to create ON-OFF switch based on the model value(Boolean).

and it should have edit (ON/OFF) feature in it.

Can anyone suggest why the css file didn't work or is there any other way i can do it .

Answer 1

Fontawesome simple switch

<style>
     .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        i.active {
            color: #5cb85c;
        }

        i.inactive {
            color: #d9534f;
        }
    </style> 

<i class="fa fa-toggle-on" ng-class="isActive?'active':'fa-rotate-180 inactive'" ng-click="isActive=!isActive" /> 

"isActive"(bool) is the switch status