web-dev-qa-db-fra.com

comment utiliser la police Awesome icon from css

Puis-je utiliser font-awesome icon avec css? Maintenant, j'ai essayé avec HTML mais sur le bouton je dois utiliser comme pseudo-classe comme :after:before alors pouvez-vous m'aider? 

ul li {
  display: inline-block;
}

.right {
  float: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note <i class="fa fa-plus"></i></button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>

htmlcssfont-awesome
5
user8847118

Vous pouvez utiliser comme ça. J'ai mis à jour votre code. 

ul li {
  display: inline-block;
}

.right {
  float: right;
}

button:after {
  content: "\f067";
  font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note</button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>

1
Kumar

Si vous inspectez un élément, vous remarquerez que vous pouvez utiliser font awsome comme ceci:

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
}
.my-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

Vous devez pouvoir trouver le code de chaque icône pour pouvoir les utiliser. Vous pouvez le faire simplement en inspectant l'élément à l'aide de cette icône (sur le site Web de font-awsome par exemple).

 enter image description here

Et vous pouvez également contrôler la taille de l'icône en modifiant la taille de la police. Voici une grande icône de couleur rouge:

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
    font-size: 32px;
    color:red;
}
.my-icon {
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

2
Temani Afif

Il vous suffit de définir FontAwesome font sur l'élément et d'ajouter un pseudo-élément avec Unicode .

 enter image description here 

ul li {
   display: inline-block;
}

.right {
   float: right;
}

button {
    font: normal normal normal 14px/1 FontAwesome;
}
button:after {
    content: "\f217";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note</i></button></li>
</ul>

1
Timofey Lavrenyuk

span:before{
  content: "\f0c9";
  font-family: 'FontAwesome';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span>hello</span>

0
koorosh safeashrafi