RTCX

Social and Subscription Icons with Plain Text and CSS

There are many ways to add social and subscription icons to web pages. Probably the easiest is by using Font Awesome. That’s because it doesn’t use images. I’m not adding back any third-party services, so I have to do it the hard way.

It’s difficult with plain text or plain text and CSS. That’s because only people adept at designing with CSS can make the social icons look like the official icons.

Social and Subscription Icons

Regular links work, but they’re easily missed. With CSS, the links will resemble the official icons but close enough is all I can get.

Here’s how I did it using CSS. In the HTML, I’m using “f”, “t” and “G+” for the social icons. I’m using the “@” (at) symbol for e-mail subscriptions.

a.socialicons { text-decoration: none; }
.socialicons {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  color: #fff;
  font-size: 1.5em;
  margin-right: 6px;
}
.facebook   { background:#3b5998; padding: 2px 18px;}
.twitter    { background:#00aced; padding: 2px 18px;}
.googleplus { background:#dd4b39; padding: 2px  4px;}
.subscribe  { background:#000000; padding: 2px 12px;}

You can look below this article to see the results. I have to mention I’m using the title attribute for each link, mainly for those of you who aren’t sure the “t” stands for Twitter instead of Tumbler. Check out the source of the page to see exactly how I did it.

When Close Enough is Good Enough for Social Icons

Some web designers aren’t satisfied with close enough. I am and I have a good reason. I’ve monitored certain things in my access logs. One of them is the links being clicked or touched by humans. Someone, other than me, clicking or touching a social icon link rarely happens.

Since I’m usually the only one who clicks on the social icons, they’re good enough for me. Perhaps I’ll someday replace them with better icons (perhaps using data URIs or something) but don’t count on it.


September 25, 2017
Web Development

You May Also Like: