-
AuthorPosts
-
November 11, 2016 at 9:21 am #711030
Hi there,
I´m trying to use the “heart” icon ue806 in the footer.php template of my child theme. Any suggestion how to do that.
I want to add a piece of text in my socket like “made with [HEART ICON HERE] in Germany”
Cheers
MichaelNovember 11, 2016 at 10:04 am #711038a quick and dirty way is to place the text in this way:
made with <span class="heart">in</span> Germany
and place the heart with
.heart:before
…you can see that on webers-testseite.de/ikom in the socket
code:.heart::before { content: "\e806 "; font-family: entypo-fontello; font-size: 14px; position: relative; top: 2px; }
November 11, 2016 at 10:25 am #711043Cool. Doesn´t seem so dirty to me ;-)
I like the “pumping”. Is that a CSS transition?
November 11, 2016 at 10:30 am #711046see here:
http://lea.verou.me/2012/12/animations-with-one-keyframe/
my code for the example page:
@keyframes pound { from, to { transform: none; } 50% { transform: scale(1.4); } } .heart::before { content: "\e806 "; font-family: entypo-fontello; font-size: 14px; position: relative; top: 2px; animation: pound .7s infinite alternate; display: inline-block }
by the way on css you have to substitue the u in ue806 with that backslash – you find it by alt+shift+7
November 11, 2016 at 10:35 am #711048Hi,
It’s the animation:
@keyframes pound { from, to { transform: none; } 50% { transform: scale(1.4); } } .heart::before { animation: pound .7s infinite alternate; }
@Guenni007: thanks for helping out :)Best regards,
NikkoNovember 11, 2016 at 10:37 am #711049you can animate alot with those keyframes … colors, scale , rotation etc. pp
November 11, 2016 at 10:47 am #711054Great but yours (on your test-site) is not changing size it´s changing color. How does that work?
(reminder to myself: need to dip deeper into advanced CSS techniques…)
November 11, 2016 at 11:32 am #711069This is what I did now in the socket of http://www.der-prinz.de
/* START Pounding heart animation */
@keyframes color_change {
from { color: #999; }
to { color: #cc0000; }
}
@keyframes pound {
to { transform: scale(1.4); }
}.heart::before {
content: ” \e806 “;
font-family: entypo-fontello;
font-size: 13px;
position: relative;
top: 1px;
animation: color_change 1s infinite alternate, pound 1s infinite alternate;
display: inline-block
}
/* END Pounding heart animation */Thanks Guenni007 for pushing me into the right direction
November 12, 2016 at 1:21 am #711362zwei deutsche die sich englisch unterhalten :lol:
– ja das hatte ich ja ganz am Anfang für dich auch so gesetzt. Dann dachte ich das Pumpen wäre besser – in Kombination sieht es gut aus und ist in der Größe auch nicht so aufdringlich.
Wäre das nicht auch ne gute idee für dich. Auf der Testseite habe ich das Hamburger Menu für die gesamte Seite – also auch auf Mobile gesetzt und ich überdecke nicht die ganze Seite mit dem Menu sondern nur einen Teil (wobei man natürlich die Wahl hat wie das abgedeckt wird (dunkel – hell oder farbig etc. ):
http://webers-testseite.de/elegant
PPS: Mein Hoster hat momentan Probleme, deshalb könnten manche Seiten von mir momentan nicht erreichbar sein.
PPPS: :wink: du darfst mir aber gerne mal einen Tip geben worauf ich beim Umsteigen auf https achten muss. !Danke
E-Mail siehst du ja bei anklicken meines Avatares.- This reply was modified 8 years, 1 month ago by Guenni007.
November 12, 2016 at 6:02 pm #711459@guenni007: You got mail
November 12, 2016 at 7:27 pm #711472Hi!
I will do lock the topic here, you can keep discussing in mail.
Thanks a lot
Regards,
Basilis -
AuthorPosts
- The topic ‘Using a font icon in templates’ is closed to new replies.