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).

1 Answer 1

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.

5
  • 1
    Hopefully the last question! Any idea how Magento converts the SVG file into an eot file? (the final rendered CSS looks like this src: url('../fonts/admin-icons/admin-icons.eot');) Commented May 9, 2016 at 14:41
  • @AlanStorm see my update ;) not 100% sure on this one Commented May 9, 2016 at 14:50
  • 1
    Nice work Raphael -- lets see what the rest of the community can come up w/r/t to those font files. magento.stackexchange.com/questions/114576/… Commented May 9, 2016 at 15:03
  • @AlanStorm hopefully I missed something and Magento provided us a nice tool to generate those files Commented May 9, 2016 at 15:04
  • In module context, this worked for me: uecommerce.com.br/… Commented Nov 19, 2016 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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