Back to all reviewers

Preserve icon font families

n8n-io/n8n
Based on 2 comments
Css

When working with icon elements in CSS, maintain the specialized font families designed for icon rendering. Replacing icon fonts (like 'element-icons') with standard text fonts (like 'Inter') will break icon displays that depend on specific glyph mappings in the icon font.

Code Style Css

Reviewer Prompt

When working with icon elements in CSS, maintain the specialized font families designed for icon rendering. Replacing icon fonts (like ‘element-icons’) with standard text fonts (like ‘Inter’) will break icon displays that depend on specific glyph mappings in the icon font.

Example of correct usage:

[class^='el-icon-'],
[class*=' el-icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'element-icons' !important;
}

.selector::after {
  position: absolute;
  right: 20px;
  font-family: 'element-icons';
  content: '\e6da'; /* This glyph exists in the icon font */
}

Before changing font-family properties, understand their purpose in the styling system, especially when they relate to icon rendering or special visual elements.

2
Comments Analyzed
Css
Primary Language
Code Style
Category

Source Discussions