What should be the generic font family for Font-Awesome fonts?

Question

I'm using FontAwesome 4.7 in one of my project and we have SonarQube integration. At few places in my custom CSS files, I've to provide Font-Family manually like:

.calendar-wrapper:after {
  font-family: 'FontAwesome';
  content: '\f073';
  position: absolute;
  right: 9px;
  top: 9px;
}

But at this line, SonarQube shows me bug: Unexpected missing generic font family (Rule Here)

What should be the generic font-family for FontAwesome? I looked everywhere on the internet but didn't found any solution yet.

Answer 1

'FontAwesome' is a custom font, so sonarqube is asking to add generic font to fallback to. Adding a generic font like "sans-serif" will be sufficinet.

.calendar-wrapper:after {
  font-family: 'FontAwesome', sans-serif;
  content: '\f073';
  position: absolute;
  right: 9px;
  top: 9px;
}

Answer 2

Based on the official documentation, you need to have a generic font in your font and font-family values. Generic fonts means serif or sans-serif and they works a fallback fonts in case the main font is not reachable which could be because of some privacy settings on user's browser.

Please check the official documentation here: https://stylelint.io/user-guide/rules/list/font-family-no-missing-generic-family-keyword/