Fontawesome before multiple text lines

  • Hi,

    I want a bif font-awesome icon before a link. The top example of this image is what I mean: https://i.stack.imgur.com/mMgro.png

    I have the following css:

    .handleiding {
	color: #fff;
	text-decoration: none;
	text-align: left;
	}

a.handleiding {
	color: #fff;
	text-decoration: none;
	}

a.handleiding:hover {
	color: #fff;
	text-decoration: none;
	}

a.handleiding:before {
   font-family: FontAwesome;
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: center;
	
}

    And the following html:

    <a href="#" class="handleiding">Content Here<br>More content here</a>

    The icon shows up in front of the upper line of text, inline. What am I doing wrong?

    Regards

Viewing 1 replies (of 1 total)

  • Clear out the default here:
    https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_before_style
    and use this as an example of how to:

    
<!DOCTYPE html>
<html>
<head>
<style>
.handleiding {
	color: #000;
	text-decoration: none;
	}
a.handleiding {
	color: #000;
	text-decoration: none;
	}
a.handleiding:hover {
	color: #000;
	text-decoration: none;
	}
a.handleiding:before {
   font-family: FontAwesome;
   content: "\f095";
   display:inline-block;
   padding-right: 3px;
   font-size:3em;
}
.handleiding span {
display:inline-block;
}
</style>
</head>
<body>
<a href="#" class="handleiding"><span>Content Here<br>More content here</a>
</body>
</html>
Viewing 1 replies (of 1 total)
  • The topic ‘Fontawesome before multiple text lines’ is closed to new replies.