Adding a Ukraine support icon to your forum

Started by Mick., April 02, 2022, 09:20:49 AM

Previous topic - Next topic

Mick.

This morning while doing my daily web routine, noticed https://adamfard.com/ has a heart icon with Ukraine's flag colors filled within the icon after it's text logo. Let's recreate it.

Temporary Demo: https://www.idesignsmf.com/dev-site2/index.php

We're using Font Awesome fas fa-heart icon.

Below is the css and html codes as follows.

Add at the end of your CSS file:
.ukraine-heart i {
    background: #0057B7;
    background: -webkit-gradient( linear, left top, left bottom, color-stop( 50%, #0057B7 ), color-stop( 50%, #0057B7 ), color-stop( 50%, #FFDD00 ));
    background: -webkit-linear-gradient(       top, #0057B7 50%, #0057B7 50%, #FFDD00 50% );   
    background:    -moz-linear-gradient(       top, #0057B7 50%, #0057B7 50%, #FFDD00 50% );
    background:     -ms-linear-gradient(       top, #0057B7 50%, #0057B7 50%, #FFDD00 50% );   
    background:      -o-linear-gradient(       top, #0057B7 50%, #0057B7 50%, #FFDD00 50% );   
    background:         linear-gradient( to bottom, #0057B7 50%, #0057B7 50%, #FFDD00 50% );
    -webkit-background-clip: text;
    background-clip: text;
    color: #0000;
}

Open index.template.php and find:
echo '
<div id="header">
<h1 class="forumtitle">
<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a>
</h1>';

Replace with:
echo '
<div id="header">
<h1 class="forumtitle">
<a id="top" href="', $scripturl, '"> ', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', ' <span class="ukraine-heart"><i class="fas fa-heart"></i></span></a>
</h1>';


Let's not use this topic to discuss the current events in Europe.

Antechinus

Hmm. That looks like fun. I'll whip up a version that doesn't require FA, for people who don't usually run it. :)

Antechinus

#2
Here you go. This uses the standard UTF8 white heart emoji as a basis (nothing extra required) and a simple ::after pseudo element which can be added to any HTML tag you like. Obviously, if you want the heart in front, you could also use a ::before pseudo.

The size of the heart can easily be adjusted by changing the font-size. This code should work on all current browsers and operating systems. :)

h1::after {
    background: linear-gradient(#0057b7 55%, #ffdd00 55%);
    color: transparent;
    font-size: 1em;
    -webkit-background-clip: text;
    background-clip: text;
    content: '\1f90d';
}
ETA: Added a screenshot of it running live on this site. :)
And I think the balance is better if the gradient stops are set at 55%. ;)

You cannot view this attachment.

Antechinus

Oh, if anyone wants the Snake Island version, you could also use the UTF8 middle finger emoji as the ::after content:
content: '\1f595';

Advertisement: