Add css prefix to avoid potential class conflicts

Question

How do I add a custom "prefix" to the i tag so that this i tag is not applied to all elements in the html?

My CSS:

i {
    color: red;
}

My HTML contains:

<i class="fa fa-camera-retro fa-2x"></i>

The red color must only be applied to that html fragment.

This is possibly a duplicate but I wasn't able to find the information I need.

Answer 1

If you have a single i that you want to refrence, you can use an id:

<i class="fa fa-camera-retro fa-2x" id="mytag"></i>

<!--CSS->

#mytag or i#mytag for more specificity {
    //styles 
}

or add a new class to your i (separated by a space):

<i class="fa fa-camera-retro fa-2x myclass"></i>

<!--CSS->

.myclass or i.myclass for more specificity {
    //styles
}