-
Notifications
You must be signed in to change notification settings - Fork 37
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
Icons in buttons #38
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm wanting to add a spinner icon to a button. I can add the spinner icon via content css, but since I cannot wrap that icon, browsers will only let me spin/transform the parent element and not the content.
So I can only spin the entire button and not the content Ive added.
For example, i added button class "btn-spinner"
and this is the CSS
.btn-spinner:before { content: "\f110"; font-family: "Font Awesome 5 Free"; padding-right:5px; font-style: normal; font-size: 0.9rem !important; font-weight: 900; animation: fa-spin 2s infinite linear; }
The animation doesnt work at this level.
if i change it to
.btn-spinner { animation: fa-spin 2s infinite linear; } .btn-spinner:before { content: "\f110"; font-family: "Font Awesome 5 Free"; padding-right:5px; font-style: normal; font-size: 0.9rem !important; font-weight: 900; }
The animation works, but the entire button spins.
Could an icon property be exposed, which adds a element with whatever class you pass in? Or could you expose the actual button element so this could be manipulated if needed?
I'm wanting to keep the original npm of this and no have to hack, but my only option right now is to download a copy and use a modified version (which means updates become a nightmare).
I think this would be beneficial to others
The text was updated successfully, but these errors were encountered: