Geek Answers Handbook

Check if css class exists and can be applied

I am using the lipis and angularjs flags icon badge . I want to check if a given flag exists, css. What is the best approach to this?

Now I just apply the class, and if the flag does not exist, then nothing is displayed.

 <i class="flag-icon" ng-class="'flag-icon-' + dialog.model.item.code | lowercase"></i>

I would like to show some text, for example "No flag" if the class does not exist in css. To do this, I need to somehow check if the given flag-icon-xx exists, but how to do it?

+4
source share
1 answer

Pure CSS solution for font-based icons

: , , , , . . .

, CSS . , " " ::before ::after ( , ):

.flag-icon::before {
    content: 'No flag';
}

, content .

.flag-icon::before {
  content: 'No flag';
}

.flag-icon-star::before {
  content: '★'
}
<h3>Working Icon</h3>
<i class="flag-icon flag-icon-star"></i>

<h3>Default Text</h3>
<i class="flag-icon flag-icon-null"></i>
Hide result

CSS

, , . - ::before ::after, , :

.flag-icon::before {
    content: 'No flag';
}

.flag-icon-1::before,
.flag-icon-2::before,
... {
    content: '';
}


.flag-icon::before {
  content: 'No flag';
}

.flag-icon-star::before {
  content: '';
}

.flag-icon-star {  
  background: url(http://i.imgur.com/yiJrwe0.png) no-repeat;
  display: block;
  height: 131px;
  width: 100px;
}
<h3>Working Icon</h3>
<i class="flag-icon flag-icon-star"></i>

<h3>Default Text</h3>
<i class="flag-icon flag-icon-null"></i>
Hide result
+6

More articles:


All Articles