Problem/Motivation

When using a custom iconfont instead of fontawesome, the mixin used for this is pretty basic.

In a recent project I worked on, I extended the icon mixin, so it can be used in the same way as the fontawesome mixin, with the ability to pass several variables (position, margin, size, color, align, ...)

Proposed resolution

Replace the content of /gulp/templates/_iconfont.scss with the following:

/* stylelint-disable */

@function icon-char($filename) {
  $char: '';
<% _.each(glyphs, function(glyph) { %>
@if $filename == <%= glyph.fileName %> {
$char: '\<%= glyph.codePoint %>';
}<% }); %>

@return $char;
}

// *
// * Icon mixin: add a custom icon before or after an element
//
// * Settings via an object, containing:
// * $icon
// * $element: pseudo-element, default = before,
// * $position,
// * $top,
// * $right,
// * $bottom,
// * $left,
// * $margin,
// * $size,
// * $color,
// * $align:middle,
//
// * USAGE:
// * @include icon(icon: arrow-left, size: 30, margin: 0 rem(10) 0 0);
@mixin icon($settings) {

  // set variables
  $icon: map-get($settings, icon);
  $element: map-get($settings, element);
  $position: map-get($settings, position);
  $top: map-get($settings, top);
  $right: map-get($settings, right);
  $bottom: map-get($settings, bottom);
  $left: map-get($settings, left);
  $margin: map-get($settings, margin);
  $size: map-get($settings, size);
  $color: map-get($settings, color);
  $align: map-get($settings, align);

  // some defaults, used in case no $settings were given
  $element-default: before;
  $color-default: inherit;
  $align-default: middle;

  // if any are not filled in, fall back to defaults
  @if ($element == null) {
    $element: $element-default;
  }
  @if ($color == null) {
    $color: $color-default;
  }
  @if ($align == null) {
    $align: $align-default;
  }

  // can only use this mixin if we are using font for custom icons
  @if ($custom-icons == true and $custom-icons-type == "font") {

    &:#{$element} {
      content: icon-char($icon);
      @if($position != null) {
        position: $position;
      }
      @if($top != null) {
        top: $top;
      }
      @if($right != null) {
        right: $right;
      }
      @if($bottom != null) {
        bottom: $bottom;
      }
      @if($left != null) {
        left: $left;
      }
      display: inline-block;
      @if ($margin != null) {
        margin: $margin;
      }
      font-family: "iconfont";
      @if ($size != null) {
        font-size: rem($size);
      }
      font-weight: normal;
      line-height: 1;
      // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
      text-decoration: none;
      vertical-align: $align;
      color: $color;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      text-transform: none;
    }

  }

}

@if ($custom-icons == true and $custom-icons-type == "font") {

	<% _.each(glyphs, function(glyph) { %>.icon-<%= glyph.fileName %> {
		@include icon((
      icon: <%= glyph.fileName %>,
    ));
	}
	<% }); %>

}
/* stylelint-enable */
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

rubendello created an issue. See original summary.

immaculatexavier made their first commit to this issue’s fork.

immaculatexavier’s picture

Assigned: Unassigned » immaculatexavier
immaculatexavier’s picture

Status: Active » Needs review
FileSize
4.25 KB

I've attached the patch in accordance with the proposed resolution.

immaculatexavier’s picture

Assigned: immaculatexavier » Unassigned
immaculatexavier’s picture

FileSize
4.27 KB

On #4 , changed the file permission from 755 to 644 and attached the patch for the same

  • rembrandx committed 8ff09a4 on 3.x authored by rubendello
    Issue #3293247 by immaculatexavier, rubendello: Optimize iconfont mixin
    
rembrandx’s picture

Status: Needs review » Reviewed & tested by the community
rembrandx’s picture

thanks for the changes! Picking this up for an upcoming release

rembrandx’s picture

Version: 3.x-dev » 3.7.0
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.