Wrong use of CSS content attribute?

Question

I wanted to add an icon via the content attribute of CSS. I just copied the code written in the first answer here for a telephone icon:
Use font awesome icon as css content

But I don't see any telephone icon. Instead, I'm seeing an empty square- why is that?
This is the full code I used:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>

<a href="#">This is a link</a>

</body>
</html>

format.css:

body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #515151;
}

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

Is that your entire css, i.e. you don't have a `@font-face` declaration? — Ulrich Schwarz, Oct 19 '16 at 17:30
Go to the fontawesome page first ...and learn how to use that resource — DaniP, Oct 19 '16 at 17:31
Hey, you must add FontAwesome stylesheet. Google it for more info. — Vagner, Oct 19 '16 at 17:32
its because you are trying to call on an image that doesnt exist. you need to link the font awesome css into your header. download their css and link using: — cup_of, Oct 19 '16 at 17:32

score 1 · Answer 1 · answered Oct 19 '16 at 17:34

The content tag is actually a reference to a webfont file, .woff. The empty square is occurs because the reference could not be resolved.

You should make sure that the css and woff resources found here - http://fontawesome.io/get-started/ - are added as references.

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>

<a href="#">This is a link</a>

</body>
</html>

score 0 · Answer 2 · answered Oct 19 '16 at 17:35

Make sure you have imported/included FontAwesome in your page, see here on how to do that.

body {
  font-family: Arial;
  font-size: 13px;
}
get-started-download a {
  text-decoration: none;
  color: #515151;
}
a:before {
  font-family: FontAwesome;
  content: "\f095";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<a href="#">This is a link</a>

Deepak Pahwa · Answer 3 · 2016-10-21T16:34:51.070

0

Just add the link given below in your head tag and your rest of the code is fine.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

Your icon will appear.

edited Oct 21 '16 at 16:34

answered Oct 19 '16 at 17:57

Deepak Pahwa

31
3

Wrong use of CSS content attribute?

3 Answers3