Related
I use a RestAPI, it's giving me different size SVG. Some images are fit but some images don't fit.
Example: If you look at the border and image, you gonna understand.
The main problem is that; I don't know all pictures sizes, How can ı set this case? (İf it's given 100% height change the card height and ı don't want this.)
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/afg.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/blr.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
.card {
border: 2px solid black;
text-align: center;
margin-bottom: rem(50px);
width: 320px;
overflow: hidden;
animation: showCard 0.7s ease-out forwards;
img {
vertical-align: middle;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&__body,
&__footer {
background: $skyblue;
}
&__body {
&-name {
color: $text-navy;
padding: rem(10px) 0;
font-size: rem(20px);
font-weight: $font-bold;
font-weight: normal;
border-bottom: 4px solid $text-navy;
}
&-infos {
padding: rem(15px) 0;
display: flex;
justify-content: center;
color: $text-navy;
span {
white-space: nowrap;
font-size: rem(14.3px);
}
span:not(:last-child) {
padding-right: rem(5px);
border-right: 3px solid $text-navy;
}
span:not(:first-child) {
padding-left: rem(5px);
}
}
}
&__footer {
border-top: 3px solid $text-navy;
padding: rem(15px) 0;
background: $text-navy;
cursor: pointer;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
There is no standard for flag dimensions. RestCountries provides flags in their true dimensions.
I created a 29 kB Single File Web Component that does all SVG flags in fixed dimensions (like most SVG flag Repos do).
And can use RestCountries (or any other SVG flag Repo) as alternative source:
https://flagmeister.github.io/
Alas, I did not create all crests, you picked the exact two I failed to complete: Afghanistan and Andorra for your screenshots. Those flags FlagMeister will default to RestCountries unless prevented with the detail setting.
<script src="https://flagmeister.github.io/elements.flagmeister.min.js"></script>
<style>
div {
display:grid;
grid-template-columns:repeat(6,100px);
gap:10px;
}
[nodetail] {
--flagmeisterdetail:99999;
}
</style>
<h3>RestCountries & FlagMeister (forced to no-detail)</h3>
<div>
<flag-af></flag-af>
<flag-af nodetail></flag-af>
<flag-by></flag-by>
<flag-by nodetail></flag-by>
<flag-ad></flag-ad>
<flag-ad nodetail></flag-ad>
</div>
If you can live with making local copies of all the flags. Then, if you add the following attribute to all SVGs, they will stretch to fit your <img> width and height.
preserveAspectRatio="none"
For instance, the Belarus flag becomes:
svg {
width: 300px;
height: 300px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="450" viewBox="0 0 1098 549" preserveAspectRatio="none">
<title>Flag of Belarus</title>
<rect fill="#C8313E" width="1098" height="549"/>
<rect y="366" fill="#4AA657" width="1098" height="183"/>
<rect fill="#FFF" width="122" height="549"/>
<g id="h">
<g id="q" fill="#C8313E" fill-rule="evenodd" transform="scale(5.304347826,9)">
<path d="M4,0h3v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1zM5,2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM5,4h1v1h-1zM0,1h1v1h-1zM0,7h1v1h-1zM11,0h0.6v2h-.6zM11,7h.6v2h-.6zM2,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM2,11h1v1h-1zM8,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM8,11h1v1h-1zM0,15h1v1h-1zM11,14h.6v2h-.6z"/>
<path d="M0,18h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1h.6v4h-.6v1h-1v1h-1v1h-1v1h-1v1h-1v2.6h-2v-0.6h-1v-1h-1v-1h-1v-1h-1 v-3h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-3v1h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1zM0,22h1v1h-1zM11,25h.6v1h-.6zM9,27h1v1h1v1h.6v1.6h-.6v-.6h-1v-1h-1zM7,30h1v.6h-1z"/>
</g>
<use xlink:href="#q" transform="translate(122,0) scale(-1,1)"/>
</g>
<use xlink:href="#h" transform="translate(0,549) scale(1,-1)"/>
</svg>
For some reason, no matter which vertical-align I use, the image is slightly under center from the text line. How do I match the size of the text? How do I match size of the emojis? How do I vertically center the image?
body {
color: #fff;
background: #000;
}
svg {
height: 1em;
width: 1em;
vertical-align: middle;
}
<section>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned with the text, and its size isn't the same as the other square emojis.
</p>
<p>
ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
</section>
Just add paddding bottom, Ive tweaked the fiddle.
svg {
height: 1em;
width: 1em;
vertical-align: middle;
padding-bottom:0.2em
}
https://jsfiddle.net/6hd320f4/
One solution would be to use flexbox like this:
p {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Don't forget flex: wrap in order to maintain the text line break.
Note: if you edit line-height and test different values, you will find a pixel inconsistency that is hard to avoid due to the fixed proportions.
Perhaps counter-intuitive, but if you use vertical-align: top;
margin: 1px 0; on the svg, it aligns correctly.
Try text-top as value of vertical-align
body {
color: #fff;
background: #000;
}
svg {
height: 1em;
width: 1em;
vertical-align: text-top;
}
<section>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned with the text, and its size isn't the same as the other square emojis.
</p>
<p>
ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
</section>
can somebody please explain to me why I cannot change the fill of this svg:
<div class="container">
<ul class="todo">
<li>
This is an item
<div class ="buttons">
<button class="remove">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59 59" style="fill;" xml:space="preserve"><g><path d="M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z"/><path d="M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z"/><path d="M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z"/><path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z"/></svg> </button>
<button class="complete">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"><g><path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/><path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411C39.251,14.885,38.62,14.922,38.252,15.336z"/></svg>
</button>
</div>
</li>
</ul>
</div>
Via css I try to manipulate:
ul.todo li .buttons button svg {
width:22px;
height:22px;
position:absolute;
top:50%;
left:50%;
margin:0 0 0 -11px;
}
ul.todo li .buttons button.remove svg .fill {
fill:#c0cecb;
}
ul.todo li .buttons button.remove:hover svg .fill {
fill:#e85656;
}
ul.todo li .buttons button.complete svg .fill {
fill:#25b99a;
}
I imagine the problem is I am not pointing the css at the svg properly, any help is greatly appreciated.
svg .fill {}
... will apply rules to any HTML element that has the fill class and is a descendant of a <svg> tag. If you want to select a <svg> tag that has the fill attribute set, you could use
svg[fill] {}
Please notice the absence of any "" (space character) between the two.
See CSS selectors and CSS combinators for details.
For example, your first rule should be:
ul.todo li .buttons button.remove svg {
fill:#c0cecb;
}
... but that is way too overqualified (overly specific). Most probably...
.todo .button > svg {
fill:#c0cecb;
}
... is more than enough, without the risk of affecting anything else in your website/app.
I have a flex container div with 2 elements - a title, and a "like" svg image that is vertically centered and is displayed just to the right of the title.
When the title is too long to be displayed on one line, it seems to fill the title div with extra space on the right, so the image will not display immediately to the right of the split text.
Here is what the HTML looks like:
.like-container {
display: flex;
align-items: center;
}
.like-div {
font-size: 10px;
margin-left: 20px;
order: 1;
}
.title {
font-size: 40px;
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
<metadata>
<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
<slices/>
<sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/>
</sfw>
</metadata>
<path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/>
<path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/>
</svg>
<span>Like</span>
</div>
<div class="title">
This is the very longish Title!
</div>
</div>
I have created a plnkr so that you can see what I mean: http://plnkr.co/edit/cPMp4sjIUTbX3ohMW4aI
Any ideas?
What you are seeking is often referred to as shrink-to-fit or shrink-wrapping, where a container neatly wraps its content without leaving extra space.
CSS3 does offer a new keyword for width and height called min-content, which makes the box wrap closely to the content, but browser support is still very weak.
Here's one alternative you may want to consider: Use the ::after pseudo-element.
Remove the "like" image from the HTML (at least for this demo) and add this to your CSS:
.title::after {
display: inline-block;
content: "";
height: 40px;
width: 40px;
background: url('http://i.imgur.com/99oDJSA.png') no-repeat;
vertical-align: baseline;
}
DEMO: http://jsfiddle.net/hjkh3dy1/
I'm trying to use a html and css trick to give the impression of using a background image as a clickable link following this tutorial. I can't get to work, however, due to two issues:
1) The link is not filling the space of the background image
2) The link will not move off the screen
I'm using an html code integration block for a weebly website. I'm a beginner to html and CSS.
<a href="website.net/link" title="photo" id=«photo»>photo</a>
<a class="photo"></a>
<style type="text/css">
.photo {
background-image: url(myImageLink.jpg);
background-size: 300px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-clip: border-box;
transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: block;
width: 190px;
height: 190px;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space:nowrap;
}
.photo:hover {
background-size: 500px;
}
</style>
Demo
You need a single <a> tag, style a background to it, give required href to it and make it display: block
html
<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>
css
.photo {
background-image: url('http://www.thinksnaps.com/wp-content/uploads/2014/07/images-background.jpg');
background-size: 300px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-clip: border-box;
transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: block;
width: 190px;
height: 190px;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space:nowrap;
}
.photo:hover {
background-size: 500px;
}
check your html code it should be like this
<a class="photo" href="website.net/link" title="photo" id="photo">photo</a>
Another example how to use .svg images as clickable background. Note that the text on links is hidden by css but may be shown along with clickable .svg images after the text. If you need the images displayed before the text just change ::after pseudo-element for ::before in the snippet below.
UPD: Added material design Google font icons as a clickable background example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clickable background</title>
<!-- Citation from http://google.github.io/material-design-icons/#setup-method-1-using-via-google-web-fonts
Similar to other Google Web Fonts, the correct CSS will be served to
activate the 'Material Icons' font specific to the browser. An additional CSS
class will be declared called .material-icons. Any element that uses this
class will have the correct CSS to render these icons from the web font. -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css" media="screen">
/* Make clickable text on links invisible. */
.clickable-background {
font-size:0;
}
.clickable-background:hover ::after, .clickable-background ::after {
content: '';
display:inline-block;
width: 48px;
height: 48px;
/*
The default clickable background image (mouse for PC) to display if no
background image is defined or it is crippled or not reachable. See the
`fill="rgb(255, 0, 0)"' key=value, this is the color (red) of the .svg image.
The width and height are defined above, so no need to change them in the source.
All the images are taken from: https://materialdesignicons.com/
*/
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="rgb(255, 0, 0)" viewBox="0 0 24 24"><path d="M11,1.07C7.05,1.56 4,4.92 4,9H11M4,15A8,8 0 0,0 12,23A8,8 0 0,0 20,15V11H4M13,1.07V9H20C20,4.92 16.94,1.56 13,1.07Z" /></svg>');
}
/* Every image need to have its own rule defined. */
.stackoverflow-icon ::after{
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="grey" viewBox="0 0 24 24"><path d="M17.36,20.2V14.82H19.15V22H3V14.82H4.8V20.2H17.36M6.77,14.32L7.14,12.56L15.93,14.41L15.56,16.17L6.77,14.32M7.93,10.11L8.69,8.5L16.83,12.28L16.07,13.9L7.93,10.11M10.19,6.12L11.34,4.74L18.24,10.5L17.09,11.87L10.19,6.12M14.64,1.87L20,9.08L18.56,10.15L13.2,2.94L14.64,1.87M6.59,18.41V16.61H15.57V18.41H6.59Z" /></svg>');
}
/*
The source of images is used instead of image files for the need to change
the color (and may be other svg values) on hover event. It seems a bit redundant
to duplicate the whole image source just for the case, but only foreground
.images can be changed in color with css `fill' property. Let us know if you
discover simpler way to do it. Otherwise you need to edit .svg file before using
it as a downloadable resourse which is the same what we do here.
See more reasons why the source of the .svg image is better than the link to it:
https://css-tricks.com/probably-dont-base64-svg/
*/
.stackoverflow-icon:hover ::after {
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="blue" viewBox="0 0 24 24"><path d="M17.36,20.2V14.82H19.15V22H3V14.82H4.8V20.2H17.36M6.77,14.32L7.14,12.56L15.93,14.41L15.56,16.17L6.77,14.32M7.93,10.11L8.69,8.5L16.83,12.28L16.07,13.9L7.93,10.11M10.19,6.12L11.34,4.74L18.24,10.5L17.09,11.87L10.19,6.12M14.64,1.87L20,9.08L18.56,10.15L13.2,2.94L14.64,1.87M6.59,18.41V16.61H15.57V18.41H6.59Z" /></svg>');
}
.github-icon ::after{
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="grey" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>');
}
.github-icon:hover ::after {
background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="blue" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>');
}
/* This rule MUST to be placed under all clickable background rules.*/
.clickable-background:hover ::after, .clickable-background ::after{
background-repeat: no-repeat;
background-size: contain;
}
/*******************************************************************************
Even better solution: clickable Google font material icons expessed as ligatures.
See the <link> tag above.
*******************************************************************************/
/* Make clickable text on links invisible. */
.material-icons {
font-size:0;
}
.material-icons a {
text-decoration: none;
}
.material-icons ::after {
font-size: 48px;
color: grey;
/*
The default clickable background image (crossed phone) to display if no
background image is defined or it is crippled or not reachable.
*/
content: 'phonelink_erase';
}
.material-icons:hover ::after {
color: blue;
}
/* Each clickable font icon need its own rule with the name of a ligature as content property value */
.material-icons.clickable-home ::after {
content: 'home';
}
.material-icons.clickable-thumb_up ::after {
content: 'thumb_up';
}
.material-icons.clickable-android ::after {
content: 'android';
}
.material-icons.clickable-important_devices ::after {
content: 'important_devices';
}
.material-icons.clickable-import_contacts ::after {
content: 'import_contacts';
}
.material-icons.clickable-phonelink_setup ::after {
content: 'phonelink_setup';
}
</style>
</head>
<body>
<p>Note that links below do not lead you to the sites linked because in the code snippet the default behaviour of links is disabled by stackoverflow.com. See the browser status bar and cursor type when hover over links. For actual testing just copy the whole snippet and create your own test.html file.</p>
<span class="clickable-background stackoverflow-icon">
Stackoverflow - sounds good, but the icon is better.
</span>
<span class="clickable-background github-icon">
Github - sounds good, but the icon is better.
</span>
<p>May be even better solution is to use clickable font symbols. Read more about this cool feature on the links below.</p>
</span>
<span class="material-icons clickable-home">
Material design icons
</span>
<span class="material-icons clickable-thumb_up">
Download material icons
</span>
<span class="material-icons clickable-android">
Google fonts
</span>
<span class="material-icons clickable-important_devices">
The Era of Symbol Fonts
</span>
<span class="material-icons clickable-import_contacts">
Material icons' geometric shapes
</span>
<span class="material-icons clickable-phonelink_setup">
Code points reference
</span>
</body>
</html>