No IMG element within A-elements.

by Andreas Burg

HTML

<div id="HINFO">
  <div id="HMail">
    <p><a href="mailto:[email protected]">[email protected]</a></p>
  </div>
  <div id="HTel">
    <p><a href="tel:+4301234567890">+43 (0) 123 456 789 0</a></p>
  </div>
  <div id="HFace">
    <p><a href="https://www.facebook.com/test/" target="_blank" rel="noopener">Besuchen Sie uns auch auf</a></p>
  </div>
  <div id="GPlus">
    <p><a href="https://plus.google.com/0001" target="_blank" rel="noopener">Folgen Sie uns auch auf</a></p>
  </div>
</div>

<hr>

<div class="HINFO">
  <div class="HMail">
    <p><a href="mailto:[email protected]">[email protected]</a></p>
  </div>
  <div class="HTel">
    <p><a href="tel:+4301234567890">+43 (0) 123 456 789 0</a></p>
  </div>
  <div class="HFace">
    <p><a href="https://www.facebook.com/test/" target="_blank" rel="noopener">Besuchen Sie uns auch auf</a></p>
  </div>
  <div class="GPlus">
    <p><a href="https://plus.google.com/0001" target="_blank" rel="noopener">Folgen Sie uns auch auf</a></p>
  </div>
</div>

CSS

/* example 1 - simple */
#HINFO a {
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: calc(.5em + 32px);
	line-height: 32px;
	display: inline-block;
	font-size: 22px;
}
#HINFO a::after {
  content: " -";
}
#HMail a {
	background-image: url(http://via.placeholder.com/32/bb0000/ffffff?text=M);
}
#HTel a {
	background-image: url(http://via.placeholder.com/32/00bb00/ffffff?text=T);
}
#HFace a {
	background-image: url(http://via.placeholder.com/32/0000bb/ffffff?text=F);
}
#GPlus a {
	background-image: url(http://via.placeholder.com/32/bb00bb/ffffff?text=G);
}

/* example 2 - advanced */
.HINFO a {
	text-decoration: none;
	padding-right: calc(.5em + 32px);
	line-height: 32px;
	display: inline-block;
	font-size: 22px;
  position: relative;
}
.HINFO a:hover {
  filter: hue-rotate(180deg);
}
.HINFO a::after {
  content: " -";
}
.HINFO a::before {
  content: "";
  position: absolute;  
  width: 32px;
  height: 32px;
  right: 0;
  transition: all .04s ease 0s;
}
.HMail a::before {
	background-image: url(http://via.placeholder.com/32/bb0000/ffffff?text=M);
}
.HTel a::before {
	background-image: url(http://via.placeholder.com/32/00bb00/ffffff?text=T);
}
.HFace a::before {
	background-image: url(http://via.placeholder.com/32/0000bb/ffffff?text=F);
}
.GPlus a::before {
	background-image: url(http://via.placeholder.com/32/bb00bb/ffffff?text=G);
}
.HINFO a:hover::before {
  transform: rotate(360deg);
  transition-duration: .4s;
}