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.
Hmm. That looks like fun. I'll whip up a version that doesn't require FA, for people who don't usually run it. :)
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%. ;)
Ukraine_heart.jpg
Oh, if anyone wants the Snake Island version, you could also use the UTF8 middle finger emoji as the ::after content:
content: '\1f595';
What about adding it via svg?
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)
content: url('path_to_image_directory/example.svg');