Description

Font icons (icon font) is a font which contains a set of icons on various subjects.

Advantages:

  • variability of color, and other properties of the cascade стилей;
  • resize images without losing качества;
  • a sufficient number of icons, made in the same style.

Insert icons using the markup

In the technological styles of embedded font icons from Font Awesome.

To add icons you must do the following:

  • go to the website Font Awesome and choose иконку;
  • go to the description of the icons and see the name класса;
  • insert the markup tag with the appropriate классами;
  • set styles for the icons (color, size, etc.).

Insert icons using only styles

.element-class {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   text-rendering: auto;
   text-decoration: none;
   vertical-align: middle;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translate(0, 0);
}

.element-class:before {
   content: "\f083";
}

Icon code can be found on the Font Awesome.

Error in the console browser

To fix the error, you need to add MIME type in config with the following contents:

<system.webServer>    
   <staticContent>
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
    </staticContent>
</system.webServer>

Hide font icons

If Your project have their own icons that You don’t want to lose for whatever reason, then You need to hide them in the following way.

// Icons WOLV'and 
.ics-wolv-content .actions .ics-wolv-row-button,
.ics-wolv-toolbar .ics-wolv-toolbar-button .ics-wolv-toolbar-button-icon,
.miniToolbar .actions a {
    display: inline-block;
    background-repeat: no-repeat;
    transform: none;
    //background: url(../images/icon.png); // path to file with icons should be specified in Your selectors 
}

.ics-wolv-row-button {
    margin: 0 3px;
    width: 24px;
    height: 24px;
}

.ics-wolv-toolbar-button-icon,
.miniToolbar a {
  margin: 0;
  width: 16px;   // width and height might exist in another selector 
  height: 16px;
  vertical-align: middle;
}

.ics-wolv-toolbar-button-limit-edit .ics-wolv-toolbar-button-icon {
    padding: 0;
    margin: 0;
    height: 16px;
}

.ics-wolv-content .actions .ics-wolv-row-button:before,
.ics-wolv-toolbar .ics-wolv-toolbar-button .ics-wolv-toolbar-button-icon:before,
.miniToolbar .actions a:before {
    content: none;
}

.ics-wolv td.tableCellFilter .clrFilters:before,
.ics-wolv td.tableCellFilter .clrFilters:after {
    content: none;
}

// Icons lookup'and 
.ics-form-edit .ics-lookup-btn {
    background: url(../images/icon.png);
    top: 6px;     // the top margin, width, height depend on Your icons 
    width: 13px;
    height: 18px;
}

.ics-lookup .ics-lookup-btn.ics-lookup-btn-clear:before, 
.ics-lookup .ics-lookup-btn.ics-lookup-btn-lookup:before {
    content: none;
}

Examples of usage

Examples of usage.