3

In Magento 2, the icons for the backend Menu are Unicode code points that are part of the Private User Area code point range, and appear to be defined via the file

vendor/magento//theme-adminhtml-backend/web/fonts/admin-icons/admin-icons.svg

How does admin-icons.svg get included into a Magento Admin Page's "font space" (for lack of a better word).

4

So if I got it right:

  • The path of this file is defined in a less variable in app/design/adminhtml/Magento/backend/web/css/source/variables/_icons.less:

    @icons-admin__font-name-path: '@{baseDir}fonts/@{icons-admin__file-name}/@{icons-admin__file-name}';
    
  • This variable is then used in app/design/adminhtml/Magento/backend/web/css/source/_icons.less (see the difference with the first file I mentionned ? it's one folder above) to be declared as a path to a custom font :

    .lib-font-face(
        @family-name: @icons-admin__font-name,
        @font-path: @icons-admin__font-name-path,
        @font-weight: normal,
        @font-style: normal
    );
    

Even though the final rendered CSS looks like this:

src: url('../fonts/admin-icons/admin-icons.eot');

I don't think Magento converts the SVG file to an EOT file.

To me, Magento is shipped with 5 different versions of the same file:

  • admin-icons.eot
  • admin-icons.svg
  • admin-icons.ttf
  • admin-icons.woff
  • admin-icons.woff2

All those 5 files are then referenced in the lib/web/css/source/lib/_typography.less file:

.lib-font-face(
    @family-name,
    @font-path,
    @font-weight: normal,
    @font-style: normal
) {
    @font-face {
        font-family: @family-name;
        src: url('@{font-path}.eot');
        src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
        url('@{font-path}.woff2') format('woff2'),
        url('@{font-path}.woff') format('woff'),
        url('@{font-path}.ttf') format('truetype'),
        url('@{font-path}.svg#@{family-name}') format('svg');
        font-weight: @font-weight;
        font-style: @font-style;
    }
}

I reckon it has to do with browser compatibilities. Again I may be wrong here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.