element does not center horizontally and icons do not appear (css) - html

Question

I cannot find out why text1 does not center horizontally and why the icons do not appear (I have only a black point instead of blue icon and
circle).
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
CSS
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}

Answer 1

The reason is because you didnt include the link to font-awesome.min.css I just added it and everything works fine.
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>