In MS Word or other word processors it is easy to make the indentation (written with first line align or the alignment of the text next to the lists of numbers or dots, so that it does not “slip” under the respective symbol, number / dot). Thus, as seen in the figure, the name of the faculty, being longer, the phrase “Ştiinţe Politice” would come under the symbol of the building.
The HTML text would look something like this, noting that I didn’t use paragraphs (it would create too much line spacing and help would be needed to shrink that space):
HTML
<i class="fa fa-user"></i> Director: Ion Dumitrescu, <br>
<i class="fa fa-graduation-cap"></i> profesor. universitar dr. <br>
<i class="fa fa-building"></i> Facultatea de Comunicare şi<br> Ştiinţe Politice<br>
<i class="fa fa-building-o"></i> Departamentul de Psihologie <br>
<i class="fa fa-phone"></i> + 021 220 1293 <br>
<i class="fa fa-envelope"></i> iondumi@fcsp.ro
Because the symbol of the first line in the paragraph would risk migrating too far to the left, due to its “text-indent: -22px” and not visible , we compensated with the pseudo-element “:: first-line” which will fix the first paragraph line to 0, as shown in the example below.
CSS
.widget {
font-family: 'Archivo Narrow', sans-serif;
padding-left: 22px ;
text-indent: -22px ;
color:black;
}
.widget::first-line {
text-indent: 0px ;
}
