I'm trying to animate a fontawesome icon, inside a span it works fine, but when I put the icon inside an anchor it stops working on chrome, on IE it works.
I am using FontAwesome 3.2.1
and this is my code
Html:
<a>
<i class="icon-wrench rotator"></i>
</a>
CSS:
.rotator {
display: inline-block;
-webkit-animation: rotate 2.5s 4 ease;
-webkit-transform-origin:90% 35%;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(-12deg);
}
to {
-webkit-transform: rotate(112deg);
}
}
I tried it with FontAwesome 3.0.2 and it works, when I upgraded to 3.2.1 it stopped working, on chrome at least.
Thanks in advance
Edit
I also have more html inside the anchor and I don't want that to rotate so adding the 'rotator' class to the anchor won't do it
Edit
This is the actual html (the example above is simplified):
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-bell-alt icon-animated-bell icon-only"></i>
<span class="badge badge-success">5</span>
</a>
Add the rotator class to the anchor instead. It will start rotating on page load, assuming this is what you want?
http://jsfiddle.net/7kANu/4/
<a class="rotator">
<i class="icon-wrench"></i>
</a>
EDIT: Are you not able to wrap the icon in a div and assign the rotator class to that as a workaround?
Related
i am using angular and my question is simple how can i make to rotate this icon when i click on it?:
<div class="col-lg-1 col-md-4 col-sm-2 col-2 alend-text">
<i class="pomrgto iconfa fas fa-chevron-circle-right view_cir" title="Ver" aria-hidden="true" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic"></i>
</div>
the icon is the pomrgto iconfa fas fa-chevron-circle-right view_cir class, i want to do this:
When i click the icon, i want to make this rotate 90 degrees to the right making a little rotate animation, and when i click again go to the original state...
I know i can do it with css, but can you give me an idea of how can i do that?
Thank you!.
try something like this:
By default set transition property on the arrow.
On click of the icon, add a new class to it (let say "active")
then in CSS:
.pomrgto{
transition: transform 1s;
}
.active{
transform: rotate(90deg)
}
<a href="link">
<i class="icon is-ac-coloured fab fa-facebook-square fa-2x"></i>
</a>
a:has(> img), a:has(> i) {
text-decoration: none;
}
Why can I still see the underline on the image?
I'd like it to be removed if an anchor link wraps an image or an italic tag.
:has() is a CSS4 selector its a working draft: https://drafts.csswg.org/selectors-4/#relational, looking at https://caniuse.com/#search=%3Ahas there isnt great browser support. So that might be the reason you are seeing nothing its simply not being parsed.
Going to have to write this using JavaScript or alternatively attach a class to your anchors that are warping images and icons.
.remove-text-decoration {
text-decoration: none;
}
I am working on a small Codepen project for practice, below is the code in question:
<div class="social-links">
<a href="https://twitter.com/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/twitter.svg">
</a>
<a href="https://medium.com/" target="_blank">
Link
</a>
<a href="https://medium.com/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg">
</a>
<a href="https://medium.com/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg">
</a>
</div>
The full code pen is here: http://codepen.io/SethHerning/pen/2ecd822daae0fecbdd7b6cafa664b6d7?editors=1100#0 (lines 18-32).
All the links work in Firefox and Edge, though the first two do not in Chrome or Opera. I've run the code through a validator and the only error is no alt attribute on the img tags. What am I missing that all the links are not working?
You're facing the 50% blocking issue defined in here: webkit transform blocking link
There's a workaround though, in your CodePen modify your css by adding the specific Chrome style -webkit-transform: rotateY(180deg) translateZ(1px):
.member:hover > div {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
This is the bug: https://bugs.webkit.org/show_bug.cgi?id=54371
On my website (http://milesopedia.com) I have this overlay on the image but the icon is not correctly aligned, as you can see here:
It's a Wordpress-based blog with a theme and if I look at the preview of the theme (http://themes.tielabs.com/sahifa/category/world/) the element is correctly positioned:
I have compared the html and css and they seem identical to me. The markup uses a span with a pseudo before element to render the icon. I can't find the source of the problem.
Here's the code:
<div class="post-thumbnail">
<a href="http://milesopedia.com/conseils/ou-partir/partir-a-nouvelle-orleans-points-miles" rel="bookmark">
<img width="310" height="165" src="http://i1.wp.com/milesopedia.com/wp-content/uploads/2016/05/Canal_Streetcar_in_New_Orleans_Louisiana_USA.jpg?resize=310%2C165" class="attachment-tie-medium size-tie-medium wp-post-image" alt="Photo: Didier Moïse">
<span class="fa overlay-icon"></span>
</a>
</div>
Set display: inline; for that <span> element.
Override this rule inherited from font-awesome.css:
.fa {
transform: translate(0, 0);
}
I've just tried to disable it in inspector and icon got centered as you expect.
UPD:
Or, as per #jacob answer, there is a cleaner approach just setting display: inline for your icon span element.
I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...
This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.
<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</button>
Clicking in the green or orange area works fine.
The image on the right, clicking on the element in blue, doesn't trigger the click.
I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)
try with this:
<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</a>
I've managed to get it working using z-index.
The icon and the span needed to have the position set for the z-index to have any effect.
I added the following to my .scss file.
.awesome {
.icon {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.
For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:
<button class="btn btn-default btn-xs" ng-click="myFunction()">
<span class="glyphicon glyphicon-th-list">
</span></button>
Hope this helps.