Issue Making Bootstrap3 Icon Spin

Issue making Bootstrap3 icon spin

The issue is that you rotate an element which is not centered in your span.

If you want a real solution, add transform-origin on .spin to change the center of rotation

.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .2s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}

http://jsfiddle.net/L4zTu/5/

How to add a spinner icon to button when it's in the Loading state?

If you look at the bootstrap-button.js source, you'll see that the bootstrap plugin replaces the buttons inner html with whatever is in data-loading-text when calling $(myElem).button('loading').

For your case, I think you should just be able to do this:

<button type="button"
        class="btn btn-primary start"
        id="btnStartUploads"
        data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

Bootstrap Accordion rotate icon when open

Your issue is that you are using scss that needs compiling into css. Also your js isn't needed.

.btn-nav-accordion[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.fa-chevron-up {
    transition: all 0.3s ease;
 }
.btn-nav-accordion.collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordion-nav">

  <div class="accordion-item">
    <div class="item-header" id="heading">
      <button class="btn btn-link btn-nav-accordion collapsed" type="button" data-toggle="collapse" data-target="#collapseDosing" aria-expanded="false" aria-controls="collapseDosing">
                <span>panel</span>
                <i class="fas fa-chevron-up"></i>
            </button>
    </div>

    <div id="collapseDosing" class="collapse collapse-nav-accordion" aria-labelledby="heading-dosing" data-parent="#accordion-nav">
      <div class="accordion-body">
        <div class="l-accordion-body">
          <h1>Body</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion-item accordion-item--savings">
    <div class="item-header" id="heading-savings">
      <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse" data-target="#collapseSavings" aria-expanded="true" aria-controls="collapseSavings">
                <span>panel</span>
                <i class="fas fa-chevron-up"></i>
            </button>
    </div>
    <div id="collapseSavings" class="collapse collapse-nav-accordion show" aria-labelledby="heading-savings" data-parent="#accordion-nav">
      <div class="accordion-body">
        <div class="l-accordion-body">
          <h1>Body</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Glyphicon not spinning when clicked

You need to make the ID update to class. Coz ID is unique identifier. you can use only one id for one element. LiveOnFiddle

 $(document).ready(function() {  $(".update").on("click", function(e) {    var $icon = $(this).find(".glyphicon.glyphicon-star"),      animateClass = "glyphicon-star-animate";
    $icon.addClass(animateClass);    // setTimeout is to indicate some async operation    window.setTimeout(function() {      $icon.removeClass(animateClass);    }, 2000);  });
});

 .glyphicon-star-animate { -webkit-animation-name: rotateThis; -webkit-animation-duration: 2s;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;   }
  @-webkit-keyframes "rotateThis" {  from {     -webkit-transform: rotate( 0deg );     } to  {     -webkit-transform: rotate( 360deg );    }  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-1.9.1.min.js"></script><div><a class="update" href="#"><i class="glyphicon glyphicon-star"></i></a></div><div>
  <a class="update" href="#"><i class="glyphicon glyphicon-star"></i></a></div><div>
  <a class="update" href="#"><i class="glyphicon glyphicon-star"></i></a></div>

Bootstrap model auto spinning icon issue

autospin: false;

This is the syntax that you can use in object initializers. You cannot use it to change an object.

The simplest approach here would be to manually remove the Bootstrap classes that add that spinning icon.

Put this code inside of your timeout callback function:

$('.modal-dialog span.icon-spin').removeClass('glyphicon-asterisk icon-spin')

Bootstrap 3 collapse change chevron icon on click

The problem is with your jQuery code not being correct.

You're closing the event handler function early on this line:

$('#serviceList').on('shown.bs.collapse'), function() {

See that second closing parenthesis? That's closing the 'on' function early. Try changing your jQuery to look like this:

$('#serviceList').on('shown.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  });

$('#serviceList').on('hidden.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  });

Rotating Glyphicons / Font Awesome in Bootstrap

The problem is that you're trying to transform an inline element - this isn't possible.

You'll need to change the display value of the glyphicon to inline block.

---

Here are the details from the CSS Transforms Module:

transformable element

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11]`

---

Related Topics