New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot modify an icon's colour or size (class="icon") #135

Closed
jeffreyselby opened this Issue Sep 9, 2015 · 6 comments

Comments

Projects
None yet
2 participants
@jeffreyselby
Copy link

jeffreyselby commented Sep 9, 2015

The following tag renders correctly in GEL Version 1.
<span class="icon icon-remove icon-size-md" style="color:red"></span>

The same code does not render correctly in GEL Version 2. Both size (icon-size-md) and color (red) are ignored.

Could you please check this.

Thanks,

Jeff

@dominikwilkowski

This comment has been minimized.

Copy link
Contributor

dominikwilkowski commented Sep 9, 2015

Hey @jeffreyselby

I don't know why the size would not work, I just tested it. The inline-style however wouldn't work on a background image. Have a read over at the GUI docs to find out how you can style the icons.

I leave this open for now to find out what your problem with the size is.

@jeffreyselby

This comment has been minimized.

Copy link

jeffreyselby commented Sep 10, 2015

Regarding the icon size I was able to resolve the matter. Sorry for the misleading comment above.
I am still having difficulty with modifying the color of an icon. The Westpac GUI docs don't provide much information and upon reading the external site for grunticon and experimenting, I had no success. Seeing the coloring of icons for Version 2 is a major departure from Version 1, it would be helpful if an example is given on the Westpac GUI site. Could you please provide a simple example of setting the color for an icon. Many Thanks, Jeff

@dominikwilkowski

This comment has been minimized.

Copy link
Contributor

dominikwilkowski commented Sep 10, 2015

No worries, we'll be refining the content in the getting-started page soon.

To colour it all you have to do is use direct embedding.

<span class="icon icon-size-lg icon-remove" data-grunticon-embed></span> would then embed the icon as an SVG and you can manipulate the SVG with CSS:

.icon.icon-remove .icons-background {
    fill: rebeccapurple;
}
@jeffreyselby

This comment has been minimized.

Copy link

jeffreyselby commented Sep 10, 2015

I manage to provide color to the icon, but is the below the recommended way or is there an easier approach.

.my-div span path {
  fill: #ff0000;
  color:blue;
}
<div class="my-div">
  <span class="icon icon-remove icon-size-lg" data-grunticon-embed></span>
</div>

Just saw your comment above. Will take a look.

@dominikwilkowski

This comment has been minimized.

Copy link
Contributor

dominikwilkowski commented Sep 10, 2015

Yes. Apart from the color attribute you won't need in an SVG this looks good.

@jeffreyselby

This comment has been minimized.

Copy link

jeffreyselby commented Sep 10, 2015

I tried out your method and it worked fine. Your method is cleaner, so I'll stick to that. Thanks for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment