Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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 */
Comment | File | Size | Author |
---|---|---|---|
#6 | 3293247-6.patch | 4.27 KB | immaculatexavier |
#4 | 3293247-4.patch | 4.25 KB | immaculatexavier |
Issue fork rocketship_theme_generator-3293247
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:
Comments
Comment #3
immaculatexavier CreditAttribution: immaculatexavier as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedComment #4
immaculatexavier CreditAttribution: immaculatexavier as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedI've attached the patch in accordance with the proposed resolution.
Comment #5
immaculatexavier CreditAttribution: immaculatexavier as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedComment #6
immaculatexavier CreditAttribution: immaculatexavier as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedOn #4 , changed the file permission from 755 to 644 and attached the patch for the same
Comment #8
rembrandx CreditAttribution: rembrandx at Dropsolid commentedComment #9
rembrandx CreditAttribution: rembrandx at Dropsolid commentedthanks for the changes! Picking this up for an upcoming release
Comment #10
rembrandx CreditAttribution: rembrandx at Dropsolid commented