Add whitepaces with ::before selector [duplicate]

Question

I have tried this but it didn't work:

.stackoverflow::before { font-family: 'FontAwesome'; content: "\f16c "; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <a class="stack-link stackoverflow" href="http://stackoverflow.com">StackOverflow</a>

Can we add whitespace(s) with ::before selector and content property like that?

That's weird... If I add 1 more space, or replace the icon itself with another character, it works... — Alexander O'Mara
– Alexander O'Mara, Commented Jun 5, 2016 at 5:00
^ This seemingly strange behavior is addressed over there. The first space after an escape sequence is the delimiter to define it has ended. — Alexander O'Mara
– Alexander O'Mara, Commented Jun 5, 2016 at 5:14
@AlexanderO'Mara Thank you for the reference. That's what I really want to learn about :) — James Vu
– James Vu, Commented Jun 5, 2016 at 5:18

Arun AK · Accepted Answer · 2016-06-05 05:04:12Z

3

Yes, You can add whitespace like this content: "\f16c \00a0";

Jsfiddle

\00a0 is hex code for a non-breaking space,used in content property. More Info

Hope it helps :)

edited Jun 5, 2016 at 5:04

answered Jun 5, 2016 at 5:00

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alexander O'Mara Over a year ago

Can you explain the significance of this code?

Arun AK Over a year ago

@AlexanderO'Mara Edited the answer man :)

Alexander O'Mara Over a year ago

Better. You wouldn't happen to know why 2 regular spaces and "A " with just 1 space works, but "\f16c "; doesn't would you? I'm finding this rather bizarre.

James Vu Over a year ago

Thank you! It works like a charm :)

Arun AK Over a year ago

As i mentioned in the answer, \00a0 is the hex code for non-breaking space used in the content property. We cant directy use   in content property. So for that reason we are using the hex code. More Info in evotech.net/blog/2007/04/named-html-entities-in-numeric-order

|

zer00ne · Accepted Answer · 2016-06-05 05:05:14Z

Yep, use \a0 it's   or non-breaking space.

.stackoverflow::before { font-family: 'FontAwesome'; content: "\f16c\a0\a0\a0\a0\a0\a0"; }

<html> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <a class="stack-link stackoverflow" href="http://stackoverflow.com">StackOverflow</a> </html>

Collectives™ on Stack Overflow

Add whitepaces with ::before selector [duplicate]

2 Answers 2

6 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Linked

Related