Question

I am currently developing a custom theme using Magento 2.3.

I am altering the sidebar menu, so that its top-level items are collapsible and an arrow appears beside them when clicked, the same as the top menu. The difference here is that, when the menu item is active and its children are visible, the arrow should point down. When it is not visible, the arrow should point left.

I have used grep, find and locate to attempt to find something which relates to icons but I haven't been able to actually locate the set of icons that Magento uses here, so I'm not sure which code I should enter as a value in the content: field in order to display the left arrow.

I can see that the following style rules are applied to achieve the downwards-pointing arrows on the top-menu:

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  line-height: 20px;
  color: inherit;
  content: '\e622';
  font-family: 'icons-blank-theme';
  vertical-align: middle;
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  speak: none;
  text-align: center;

I have applied this styling to all sidebar items which have my active class and it works. I just need to know where the file containing icons-blank-theme resides.

EDIT:

I have found a very long-winded workaround. The level1+ items within the topmenu use a right-facing arrow. I double-checked that the codes for the right- and downwards-facing arrows were both relatively close to each other (\e608 and \e622). I then altered the CSS value on the webpage using my browser's code inspector feature and manually searched e608-22 until I discovered the code for the left-facing arrow \e617. To clarify, I do not require the code, I simply require directions explaining how to determine which icons are available and which codes belong to them.

Was it helpful?

Solution

Icons from blank theme are stored in:

lib/web/fonts/Blank-Theme_Icons

under this directory you have selection.json file,

so just drag and drop this file to https://icomoon.io and after import you can see codes when you click "Generate Font" and even change and create new set of icons.

When You create your own package of icons you can copy them to:

Yourtheme/web/fonts/

and add new font face in Yourtheme/web/css/source/_typhography.less

  // icon fonts created using icomoon
  .lib-font-face(
    @family-name: @icomoon-icons__font-name,
    @font-path: @icomoon-icons__font-path,
    @font-weight: normal,
    @font-style: normal
)
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top