Widget size

html-css

#1

When trying to link a Facebook, Twitter, or Instagram to your website how do you control the size of the widget?


#2

The images are usually in the range of 50px +/-, and can be handled in the CSS.

Create a container and populate with links. give the container a meaningful id, such as social-media.

<div id="social-media">
  <a href="#" title="Facebook"></a>
  <a href="#" title="Twitter"></a>
  <a href="#" title="Instagram"></a>
  <a href="#" title="Medium"></a>
</div>

We do not need image tags. They will be CSS backgrounds on the link boxes.

#social-media a {
    display: inline-block;
    width: 50px;
    height: 50px;
    opacity: 1;
}
#social-media a:hover,
#social-media a:focus {
    opacity: 0.5;
}

#social-media a[title="Facebook"] {
    background-image: url(#);
}
#social-media a[title="Twitter"] {
    background-image: url(#);
}
#social-media a[title="Instagram"] {
    background-image: url(#);
}
#social-media a[title="Medium"] {
    background-image: url(#);
}

The advantage of the title attribute is a tool-tip appears with the name of the media. We don’t need extra verbiage in the HTML.

Social Media links


The above adds a script…

const socialMediaLinks = document.querySelector('#social-media');
socialMediaLinks.forEach(link => link.target = "_blank")

This code adds a target="_blank" to every link in the collection.


#3

Would you possibly know how to change the link colors?


#4

The color cannot be changed in the code unless you overlay a color filter, and/or add a background color.

The images are CC’s, which is why I used a codebit–it is on their domain. I don’t know who owns the SVG files,but until we do know it is safe to assume it is CC. What you could do is take a screenshot and create your own images to upload on your server or image host. Then you can make them any color you like. If your save them as transparencies then you can still manipulate the background color with CSS.

Alternatively, you could research each social media site and see if they have public access to an image CDN where optional images might be found. It’s leg work, but that would be the best way, imho.