Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 11, 2016 at 9:21 am #711030
    Michael Oeser

    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
    Michael

    November 11, 2016 at 10:04 am #711038
    Guenni007

    a 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 #711043
    Michael Oeser

    Cool. Doesn´t seem so dirty to me ;-)

    I like the “pumping”. Is that a CSS transition?

    November 11, 2016 at 10:30 am #711046
    Guenni007

    see 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 #711048
    Nikko

    Hi,


    @Michael    :

    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,
    Nikko

    November 11, 2016 at 10:37 am #711049
    Guenni007

    you can animate alot with those keyframes … colors, scale , rotation etc. pp

    November 11, 2016 at 10:47 am #711054
    Michael Oeser

    Great 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 #711069
    Michael Oeser

    This 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 #711362
    Guenni007

    zwei 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 ago by Guenni007.
    November 12, 2016 at 6:02 pm #711459
    Michael Oeser

    @guenni007: You got mail

    November 12, 2016 at 7:27 pm #711472
    Basilis

    Hi!

    I will do lock the topic here, you can keep discussing in mail.

    Thanks a lot

    Regards,
    Basilis

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Using a font icon in templates’ is closed to new replies.