Adding a Ukraine support icon to your forum

[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:

Code Select Expand

.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:

Code Select Expand

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:

Code Select Expand

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]

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.

Code Select Expand

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:

Code Select Expand

content: '\1f595';

[mishafauci]

What about adding it via svg?

[Antechinus]

Why would you want to, when a basic emoji does the job already?

But sure, you can if you want to. Just call in an SVG image.
Could also be done with any other image format (GIF, JPG, PNG, etc)

Code Select Expand

content: url('path_to_image_directory/example.svg');