Hello, I am using fontawesome icons. I have set up angle-right and angle-left on my flexslide images. The problem is that I can´t see them. I have tried everything. I have reviewed the @font-face links on the css file, and every seems to be ok. Thanks in advance if anybody can help me.
This is the HTML Code.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesionales adecuados."/>
<title>Balance - Salud Mental Online</title>
<link rel="stylesheet" href="./css./flexslider.css">
<link rel="stylesheet" href="./css/all.css"> <!--FONTAWESOME-->
<script src="./js./jquery-3.5.1.js"></script>
<script src="./js./jquery.flexslider.js"></script>
<script src="./js./main.js"></script>
<link rel="icon" href="img/favicon.png">
<!-- FONT POPPINS-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet"/>
<!-- BACKGROUND HERO PATTERNS: TEMPLE COLORS: #FFFFFF #9ACD32-->
</head>
<body>
<nav class="navmain">
<a href="#index.html">
<img src="img/logo.png" class="brand" alt="logotipo oficial">
</a>
<ul class="navmenu">
<li>
<a href="./quienes_somos.html">¿Quienes Somos?</a>
</li>
<li>
<a href="./nuestros_profesionales.html">Nuestros Profesionales</a>
</li>
<li>
<a href="./consultas_citas.html">Consultas y Citas</a>
</li>
<li>
<a href="./blog.html">Blog</a>
</li>
</ul>
</nav>
<div class="flexslider">
<ul class="slides">
<li>
<img src="./img./adiccion.jpg" />
<section class="caption">
<h2>Adicción</h2>
</section>
</li>
<li>
<img src="./img./ansiedad.jpg" />
<section class="caption">
<h2>Ansiedad</h2>
</section>
</li>
<li>
<img src="./img./bullying.jpg" />
<section class="caption">
<h2>Bullying</h2>
</section>
</li>
<li>
<img src="./img./terapia_pareja.jpg" />
<section class="caption">
<h2>Terapia de Pareja</h2>
</section>
</li>
<li>
<img src="./img./depresion.jpg" />
<section class="caption">
<h2>Depresión</h2>
</section>
</li>
<li>
<img src="./img./estres.jpg" />
<section class="caption">
<h2>Estrés</h2>
</section>
</li>
<li>
<img src="./img./panico.jpg" />
<section class="caption">
<h2>Pánico</h2>
</section>
</li>
<li>
<img src="./img./ira.jpg" />
<section class="caption">
<h2>Ira</h2>
</section>
</li>
</ul>
</div>
<footer class="pie">
2018-2020 Balance Salud Mental - Designed by Watermelon
</footer>
</body>
</html>
and this is CSS code:
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("webfonts/fa-brands-400.eot");
src: url("webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-brands-400.woff2") format("woff2"), url("webfonts/fa-brands-400.woff") format("woff"), url("webfonts/fa-brands-400.ttf") format("truetype"), url("webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("webfonts/fa-regular-400.eot");
src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("webfonts/fa-solid-900.eot");
src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*BODY*/
body {
text-align: center; /*Align in the center the texts on the web, in this case just the footer, doesn´t take in count top menu or previous and next*/
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.22'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
font-family: 'Poppins', sans-serif; /*Font style of the Top menu, image´s title and Previous and Next Buttons*/
}
/*TOP MENU*/
.navmain {
justify-content: space-evenly; /*Distribute the logo and the top menu items in the white area*/
align-items: center; /*Align the Top menu and the logo in the very center of the white area*/
display: flex; /*Align the Top menu and the logo,otherwise it remains in a column*/
height: 100px; /*Height size of the Top Menu*/
background: white; /*Background color behind the top menu (not include the background behind the logo*/
}
.navmain ul {
display: flex; /*Align the Top menu,othrwise it remains in a column*/
}
.navmain ul li {
padding: 30px; /*Distance between sides and logo/top menu*/
list-style: none; /*Top menu bullets next to the links*/
}
a {
color: #313335; /*Top menu & Previous/Next buttons font*/
text-decoration: none; /*Top menu & Previous/Next buttons underlined*/
font-size: 18px; /*Top menu & Previous/Next buttons font Size*/
}
/*LOGO*/
.brand {
width: 190px; /*brand size*/
}
/*FOOTER*/
.pie {
font-family: monospace; /*footer style*/
margin-top: 79px; /*Set the space between the footer and the box of images*/
}
/*FLEXSLIDER*/
.flexslider {
width: 100%;
max-width: 606px; /*box size*/
margin: 46px auto; /*top and side margin of the images box*/
box-shadow: 0px 0px 30px 0px white; /*border box shine*/
display: flex; /*box size & previous and next label position*/
flex-direction: column;
position: relative; /*navigation bullets position*/
color: whitesmoke;
}
/*
.slides,
.slides li,
.slides li img {
width: 100%;
}
*/
.slides li {
margin-bottom: -12px; /*Bottom margin of the images*/
}
/* PAGINACION*/
/*CONFIGURATION OF THE BULLETS AND ITS NUMBERS POSITION AS A WHOLE, AS A GROUP*/
.flex-control-nav.flex-control-paging {
position: absolute; /*Set the position of the bullets & numbers inside the box of images, without this would be as a column on the right side of the web*/
z-index: 2; /*Allow to the bullets & numbers be seen, otherwise it would remain behind the images*/
bottom: -5%; /*Set the position of the bullets & numbers near to the bottom of the box border*/
/*Set the position of the bullets & numbers to 210px far from margin left*/
list-style: none; /*Erase the style of the bullets, in this case the numbers along them*/
justify-content: center;
align-items: center;
align-self: center;
display: flex;
width: 606px;
padding: 20px 0px;
}
/*CONFIGURATION OF EACH BULLET AND ITS NUMBER ACCOMODATION, SEPARATELY*/
.flex-control-nav li {
display: inline-block; /*Allow to set the bullets & numbers in line, side by side*/
margin: 0 5px; /*Set the space between the bullets & numbers*/
}
/*CONFIGURATION OF THE BULLETS & NUMBERS STYLE*/
.flex-control-nav li a {
display: block;
width: 15px; /*Set the width of the bullets, the more width, the more these look as a UFO*/
height: 15px; /*Set the height of the bullets, the higher, the more these look as eggs*/
background: #B6AFAF; /*Set the color of the bullet*/
border-radius: 50%; /*Set how round the bullet will be, 50% is a circle, 0% is a square*/
box-shadow: inset 0px -3px 5px 0 grey; /*Set the color of the shadow of the bullet*/
color:rgb(255, 255, 255, 0.01); /*Set the color of the numbers, If you want them invisible, put the last number close to zero*/
}
.flex-control-nav li a.flex-active {
background:#9acd32; /*Set the color of the bullet that belongs to the image that is running at that moment*/
}
/* NAVEGACION*/
/*CONFIGURATION OF THE POSITION AND STYLE OF BOTH NAVIGATION LABELS (PREVIOUS & NEXT)*/
.flex-direction-nav {
z-index: 2; /*Allow to show the labels, otherwise it would remain behind the images*/
list-style: none; /*Erase the labels style (in this case the bullet next to them)*/
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /*Set the font style of the labels*/
}
/*CONFIGURATION OF THE POSITION AND BACKGROUND OF BOTH PREVIOUS AND NEXT LABELS*/
.flex-direction-nav a {
background: red; /*Previous and Next labels background color*/
position: absolute; /*Set the position of the labels inside the images box*/
top: 45%; /*Set the labels in the middle of the images box*/
opacity: 0; /*Set that the prev and next label mustn´t be shown at the beginning*/
display: flex;
justify-content: center;
align-items: center;
}
.flex-direction-nav a::before {
content: "\f104";
font-size: 50px;
color: #9acd32;
}
/*CONFIGURATION OF THE POSITION OF BOTH NAVIGATION LABELS SEPARATELY*/
.flex-direction-nav .flex-prev {
left: 0px; /*Set the distance between the border and the prev label*/
}
.flex-direction-nav .flex-next {
right: 0px; /*Set the distance between the border and the next label*/
}
/*CONFIGURATION OF THE ANIMATION OF THE LABELS*/
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1; /*Set that the prev label must be shown*/
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1; /*Set that the prev label must be shown*/
}
.caption {
position: absolute;
top: .5%;
width: 100%;
height: 100%;
}
/*RESPONSIVE*/
@media screen and (max-width: 770px) {
.flex-direction-nav a {
opacity: 1;
}
}
@media screen and (max-width: 750px) {
.brand {
width: 190px; /*brand size*/
margin-top: 15px;
}
.navmain {
display: inline-table;
background: white; /*Background color behind the top menu (not include the background behind the logo*/
}
.slides li img {
width: 100%;
}
}
@media screen and (max-width: 610px) {
.brand {
width: 190px; /*brand size*/
margin-top: 15px;
}
.navmain {
display: inline-table;
background: white; /*Background color behind the top menu (not include the background behind the logo*/
}
.navmain ul {
margin-right: 25px;
}
.flexslider {
/*box size*/
margin: 40px auto; /*top and side margin of the images box*/
/*box border style*/
/*box corner curve style*/
box-shadow: 0px 0px 30px 0px white; /*border box shine*/
display: flex; /*box size & previous and next label position*/
position: relative; /*navigation bullets position*/
}
.flex-control-nav.flex-control-paging {
position: absolute; /*Set the position of the bullets & numbers inside the box of images, without this would be as a column on the right side of the web*/
z-index: 2; /*Allow to the bullets & numbers be seen, otherwise it would remain behind the images*/
bottom: 1%; /*Set the position of the bullets & numbers near to the bottom of the box border*/
/*Set the position of the bullets & numbers to 210px far from margin left*/
list-style: none; /*Erase the style of the bullets, in this case the numbers along them*/
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
padding: 20px 0px;
}
.slides li img {
width: 100%;
}
.navmain ul li {
padding: 10px; /*Distance between sides and logo/top menu*/
list-style: none; /*Top menu bullets next to the links*/
}
}
@media screen and (max-width: 415px) {
.brand {
width: 170px; /*brand size*/
margin-top: 15px;
}
.navmain {
display: inline-table;
background: white; /*Background color behind the top menu (not include the background behind the logo*/
}
.navmain ul {
margin-right: 10px;
}
.flexslider {
max-width: 606px; /*box size*/
margin: 40px auto; /*top and side margin of the images box*/
border: 3px solid black; /*box border style*/
border-radius: 8px; /*box corner curve style*/
box-shadow: 0px 0px 30px 0px white; /*border box shine*/
display: flex; /*box size & previous and next label position*/
position: relative; /*navigation bullets position*/
color: whitesmoke;
}
.slides li img {
width: 100%;
}
.navmain ul li {
padding: 5px; /*Distance between sides and logo/top menu*/
list-style: none; /*Top menu bullets next to the links*/
}
a {
color: #313335; /*Top menu & Previous/Next buttons font*/
text-decoration: none; /*Top menu & Previous/Next buttons underlined*/
font-size: 15px; /*Top menu & Previous/Next buttons font Size*/
}
}
This is how my web looks:
This is the visual studio code screenshot:
