Deelknop Bluesky toevoegen op je website
Omdat Bluesky een relatief nieuw medium is en ik nog op een website een vrij oude Font Awesome gebruik om deelknoppen te laten zien, kan ik geen gebruik maken van het nieuwe icoontje. Het is voor mij als luilak, te veel werk alles naar de nieuwe Font Awesome te laten refereren. Dus, dan maar iets anders verzinnen.
Er is een website waarmee je icoontjes kunt maken: iconify.
En zoals je ziet is het bluesky-icoontje hier al netjes klaargemaakt. Het mooie is dat je hiermee ook code kunt genereren die je simpel in je eigen website kunt kopiëren. Dat spreekt mij natuurlijk wel aan. Ik heb een paar minimale aanpassingen moeten doen, en het werkt gewoon. Dit is de gekopieerde code voor de website:
/* Bluesky icoontje*/
.fa-bluesky{
height: 20px;
width: 20px;
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMiAxMC44Yy0xLjA4Ny0yLjExNC00LjA0Ni02LjA1My02Ljc5OC03Ljk5NUMyLjU2Ni45NDQgMS41NjEgMS4yNjYuOTAyIDEuNTY1Qy4xMzkgMS45MDggMCAzLjA4IDAgMy43NjhjMCAuNjkuMzc4IDUuNjUuNjI0IDYuNDc5Yy44MTUgMi43MzYgMy43MTMgMy42NiA2LjM4MyAzLjM2NHEuMjA0LS4wMy40MTUtLjA1NnEtLjIwNy4wMzMtLjQxNS4wNTZjLTMuOTEyLjU4LTcuMzg3IDIuMDA1LTIuODMgNy4wNzhjNS4wMTMgNS4xOSA2Ljg3LTEuMTEzIDcuODIzLTQuMzA4Yy45NTMgMy4xOTUgMi4wNSA5LjI3MSA3LjczMyA0LjMwOGM0LjI2Ny00LjMwOCAxLjE3Mi02LjQ5OC0yLjc0LTcuMDc4YTkgOSAwIDAgMS0uNDE1LS4wNTZxLjIxLjAyNi40MTUuMDU2YzIuNjcuMjk3IDUuNTY4LS42MjggNi4zODMtMy4zNjRjLjI0Ni0uODI4LjYyNC01Ljc5LjYyNC02LjQ3OGMwLS42OS0uMTM5LTEuODYxLS45MDItMi4yMDZjLS42NTktLjI5OC0xLjY2NC0uNjItNC4zIDEuMjRDMTYuMDQ2IDQuNzQ4IDEzLjA4NyA4LjY4NyAxMiAxMC44Ii8+PC9zdmc+");
}
Awesome deception
Deze code maakt dus het icoontje aan, zodat het verderop gebruikt kan worden onder de misleidende naam: fa-bluesky. 🕶 Voor de grootte en breedte heb ik hier 20px genomen, omdat de standaard van 1em het Bluesky-icoontje wel erg dominant-groot tegenover de andere icoontjes maakt. En dat willen we natuurlijk niet.
De URL die onder het knopje moet, vind je op een informatiepagina van Bluesky. En uiteindelijk staat het er als volgt genoteerd:
<a href="https://bsky.app/intent/compose?text=Voor%20ontspanning%20en%20vermindering%20van%20pijn%20en%20stress%3A%20Kanta%20Thaise%20Massage%20https%3A%2F%2Fkantamassage.nl"><i class="fa fa-bluesky w3-hover-opacity"></i></a>
En mocht je benieuwd zijn welke website het betreft: kantamassage.nl.