[Button, Icon] Loading icon Position in Button was not rotating around center #361
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
A
loading icon
within a button was rotated around a wrong anchor position (similiar to the Fix in #336 )labeled icon button
(a loading spinner was rotating the background sqare before if you tried it)Due to the fixes you are now finally able to correctly use loading icons in buttons together with text by either using
labeled icon button
or justicon button
.After fixing it, the used
notched circle icon
used in the fiddle still looked slightly misaligned. It turned out this is due to the icon in FontAwesome itself not being centered accurately.To proove this, i added an example in the fiddle below where you can obviously see it. The 100% circle background stays fixed while the spinning icon does not precisely although it`s a 100% square (same pixel height/width/font-size)
Testcase
http://jsfiddle.net/bztsj9wm/3/
Remove the CSS to see the previous wrong behavior
Screenshot
Broken (spinners move around wrong anchor and
labeled icon button
rotated background colorFixed, all looks fine 😄
Closes
Semantic-Org/Semantic-UI#3971
Semantic-Org/Semantic-UI#2271
Semantic-Org/Semantic-UI#6124
Semantic-Org/Semantic-UI#916