Skip to main content
Bounty Ended with 200 reputation awarded by Volker
fixed comma-splice and run-on sentences
Source Link
avpaderno
  • 97.9k
  • 15
  • 164
  • 284

Here is what I ended up with, after using the hook_mmenu_icon() and configuring the Icon API to use the icomoon bundle (see https://dgo.to/icomoon).

How I did it?

How I did it?

First of all, I opted for using the https://dgo.to/icomoon contribIcomoon module, thatwhich allows me to import my own defined icons collections, assembled using the icomoon app (https://icomoon.io/app/#/select app).

HereThis is an example of a custom collection I created (and the renaming/mapping of icons to the menu points I had in mind):.

After that was done, I had to go to the administration interface of Icon API providers and import the icons (/admin/config/media/icon/import). I named the imported bundle 'icomoon', which will be important for the code I wrote. This is what that admin interface looked like:.

The code

The code

The code you will need will use the hook_mmenu_icon(), since you want to define myyour own paths =>path to icon-classes class associations.

This is what my code looks like:.

Notice the use of Drupal's internal paths as the key to the $icons array, this. This is needed by mmenuthe module (inside the mmenu_get_icon_class() function) in order to assign our custom CSS class to the menu item that points to it.

The rest of the code, is quite custom and just a random idea of how you could go about doing the assignments you need, probably. Probably there are better approaches to this.

Good luck!

Here is what I ended up with, after using the hook_mmenu_icon() and configuring the Icon API to use the icomoon bundle (see https://dgo.to/icomoon)

How I did it?

First of all, I opted for using the https://dgo.to/icomoon contrib module, that allows me to import my own defined icons collections, assembled using the icomoon app (https://icomoon.io/app/#/select)

Here is an example of a custom collection I created (and the renaming/mapping of icons to the menu points I had in mind):

After that was done, I had to go to the administration interface of Icon API providers and import the icons (/admin/config/media/icon/import). I named the imported bundle 'icomoon', which will be important for the code I wrote. This is what that admin interface looked like:

The code

The code you will need will use the hook_mmenu_icon(), since you want to define my own paths => icon-classes associations.

This is what my code looks like:

Notice the use of Drupal's internal paths as the key to the $icons array, this is needed by mmenu (inside the mmenu_get_icon_class() function) in order to assign our custom CSS class to the menu item that points to it.

The rest of the code, is quite custom and just a random idea of how you could go about doing the assignments you need, probably there are better approaches to this.

Good luck!

Here is what I ended up with, after using hook_mmenu_icon() and configuring the Icon API to use the icomoon bundle.

How I did it?

First of all, I opted for using the Icomoon module, which allows me to import my own defined icons collections, assembled using the icomoon app.

This is an example of a custom collection I created (and the renaming/mapping of icons to the menu points I had in mind).

After, I had to go to the administration interface of Icon API providers and import the icons (/admin/config/media/icon/import). I named the imported bundle 'icomoon', which will be important for the code I wrote. This is what that admin interface looked like.

The code

The code you need will use hook_mmenu_icon(), since you want to define your own path to icon class associations.

This is what my code looks like.

Notice the use of Drupal's internal paths as the key to the $icons array. This is needed by the module (inside mmenu_get_icon_class()) in order to assign our custom CSS class to the menu item that points to it.

The rest of the code is quite custom and just a random idea of how you could go about doing the assignments you need. Probably there are better approaches.

added 2 characters in body
Source Link

The code you will need will use the hook_mmenu_icon(), since Iyou want to define my own paths => icon-classes associations.

The code you will need will use the hook_mmenu_icon(), since I want to define my own paths => icon-classes associations.

The code you will need will use the hook_mmenu_icon(), since you want to define my own paths => icon-classes associations.

Source Link

Here is what I ended up with, after using the hook_mmenu_icon() and configuring the Icon API to use the icomoon bundle (see https://dgo.to/icomoon)

enter image description here

How I did it?

First of all, I opted for using the https://dgo.to/icomoon contrib module, that allows me to import my own defined icons collections, assembled using the icomoon app (https://icomoon.io/app/#/select)

Here is an example of a custom collection I created (and the renaming/mapping of icons to the menu points I had in mind):

enter image description here

After that was done, I had to go to the administration interface of Icon API providers and import the icons (/admin/config/media/icon/import). I named the imported bundle 'icomoon', which will be important for the code I wrote. This is what that admin interface looked like:

enter image description here

The code

The code you will need will use the hook_mmenu_icon(), since I want to define my own paths => icon-classes associations.

This is what my code looks like:

/**
* Implements hook_mmenu_icon().
*
* Here we map URLs to icon classes.
*/
function YOUR_CUSTOM_MODULE_mmenu_icon() {
  $icons = array(
    'path' => array(
      'home' => 'icon-home',
      'node/1' => 'icon-node1',
    ),
  );
  _inject_inline_css($icons);
  return $icons;
}

Notice the use of Drupal's internal paths as the key to the $icons array, this is needed by mmenu (inside the mmenu_get_icon_class() function) in order to assign our custom CSS class to the menu item that points to it.

The rest of the code, is quite custom and just a random idea of how you could go about doing the assignments you need, probably there are better approaches to this.

/**
 * Function for injecting Icon API icons as CSS background images.
 */
function _inject_inline_css($icons) {
  // Load a bundle provider from the Icon API.
  $bundle = icon_bundles('icomoon');

  // Sanitization, normalization.
  if (empty($bundle)) {
    return;
  }
  if (!isset($bundle['settings']['extension'])) {
    $bundle['settings']['extension'] = 'png';
  }

  $css_data = array();

  // Configure an existing icon class, 'home'.
  $icon_path = $bundle['path'] . '/' . strtoupper($bundle['settings']['extension']) . '/home' . '.' . $bundle['settings']['extension'];
  $icon_info = image_get_info($icon_path);
  $icon_url = file_create_url($icon_path);
  $css_data[$icons['path']['home']] = array(
    'background-image' => 'url("' . $icon_url . '")',
    'background-size' => 'contain',
    // Or, as an alternative.
    // 'background-size' => '$icon_info['width'] . 'px ' . $icon_info['height'] . 'px'',      
    'background-repeat' => 'no-repeat',
    'background-position' => 'center',
  );

  // Add a custom icon class, 'node/1'.
  $icon_path = $bundle['path'] . '/' . strtoupper($bundle['settings']['extension']) . '/node1' . '.' . $bundle['settings']['extension'];
  $icon_info = image_get_info($icon_path);
  $icon_url = file_create_url($icon_path);
  $css_data[$icons['path']['node/1']] = array(
    'background-image' => 'url("' . $icon_url . '")',
    'background-size' => 'contain',
    // Or, as an alternative.
    // 'background-size' => '$icon_info['width'] . 'px ' . $icon_info['height'] . 'px'',      
    'background-repeat' => 'no-repeat',
    'background-position' => 'center',
  );

  // Generate and add inline CSS, mapping the mmenu icon classes to the icomoon icons.
  $css_string = '';
  foreach ($css_data as $class => $css_properties) {
    $css_string .= '.' . $class . ' {';
    foreach ($css_properties as $css_property => $css_value) {
      $css_string .= "$css_property: $css_value;";
    }
    $css_string .= '}';
  }
  drupal_add_css($css_string, array('type' => 'inline'));
}

Good luck!