CODEWITHSUNDEEP
css
spr1x
spr1x

Reputation: 37

How to use custom icon by importing a font in CSS

I would like to use an icon in CSS using @import from https://www.dafont.com/arrow-7.font. For some reason the icon doesn't load. Any idea what am I doing wrong here ? Thank you!

<div class="icon">

</div>



@font-face {
    font-family: myFirstFont;
    src: url("myserverDirectory/arrow_7.tff");
}

.icon {
height:40px;
width:40px;
font-family:myFirstFont;
content:'/0112';
}

Upvotes: 0

Views: 43

Answers (1)

Jayx
Jayx

Reputation: 3966

content is a valid property for pseudo elements only, e.g.:

.icon::before{
  content: '/0112';
  display: inline-block;
  font-family: 'myFirstFont';
  height: 40px;
  width: 40px;
}

The font does load otherwise.

Upvotes: 1

Related Questions