Кнопки социальных сетей «невидимы» на страницах с использованием шаблона по умолчанию?

Question

привет, я новичок в css и html, извините, если это SUPER basi c, но я пробовал кое-что из tinke rnet и не могу найти что-то, что будет работать (вероятно, это простое решение и более сложное)

в основном, я хочу, чтобы моя панель навигации и кнопки социальных сетей вверху и внизу страницы (Resp) отображались на страницах 'about' и 'cv', которые оба используют макет по умолчанию. Похоже, они используют css, но единственное, что не работает, - кнопки социальных сетей. они присутствуют как интерактивные ссылки, но их просто не видно .. есть идеи?

    .xx-socialmedia-buttons .fa {
        font-size: 2.25rem;
        align-content: center;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        padding: 0px 15px;
        font-weight: 400;
        color: #fff;
    }
    
    .fa-facebook {
        width: 11px;
        height: 13px;
    }
    
    .fa:hover {
        opacity: 0.3;
    }
    
    nav ul, footer ul {
        font-family:'Helvetica', 'Arial', 'Sans-Serif';
        padding: 0px;
        list-style: none;
        font-weight: bold;
    }
    
    nav ul li, footer ul li {
        display: inline;
        margin-right: 0px;
    }
        *FOOTER*/
        .xx-main-footer {
            background-color: rgb(161, 216, 238);
            align-content: center;
            align-items: center;
            text-align: center;
            justify-content: center;
            margin: 0 auto;
        }
        
        .xx-main-footer ul {
            margin: 0px auto;
            padding: 1rem 1rem 1rem 1rem;
        }
        
        .xx-main-footer .xx-socialmedia-buttons .fa {
            color: rgb(79, 41, 88);
            padding: 0px 30px;
        }
        
        .xx-main-footer .xx-socialmedia-buttons a { 
            opacity: 0.6;
            color: rgb(79, 41, 88);
            cursor: pointer;
            text-decoration: none;
            justify-self: center;
            padding: 0px 30px;
        }
        
        .xx-main-footer .xx-socialmedia-buttons .fa:hover,
        .xx-main-footer .xx-socialmedia-buttons a:hover {
            opacity: 0.3;
        } 

    <footer class="xx-main-footer">
    	<div class="xx-socialmedia-buttons">
    		<ul>
    			<li><a href="xxx">email me</a></li>
    			<!-- <li><a href="xxx">github.com/xx</a></li> -->
    			<li><a href="xxx" target="_blank" class="fa fa-github"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-linkedin"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-facebook"></a></li>
    			<li><a href="https://www.instagram.com/xxx"rel="noopener noreferrer" target="_blank" class="fa fa-instagram"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-youtube"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-pinterest"></a></li>
    		</ul>
    	</div>
    </footer>

Я заменил свои соглашения об именах и ссылки на x, поэтому я надеюсь, что это не запутывает ...

Мне просто интересно , есть ли особый способ сделать так, чтобы это отображалось на каждой странице, потому что я не думаю, что делаю это правильно ...

Answer 1

Возможно, вы забыли импортировать таблицу стилей для шрифтов и забыли добавить / перед комментарием FOOTER в вашем CSS.

Вот рабочий фрагмент.

.xx-socialmedia-buttons{
font-size: 2.25rem;
align-content: center;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
border-radius: 50%;
padding: 0px 15px;
font-weight: 400;
color: #fff;
}

.fa-facebook {
width: 11px;
height: 13px;
}


nav ul, footer ul {
font-family:'Helvetica', 'Arial', 'Sans-Serif';
padding: 0px;
list-style: none;
font-weight: bold;
}

nav ul li, footer ul li {
display: inline;
margin-right: 0px;
}

/*FOOTER*/
.xx-main-footer {
background-color: rgb(161, 216, 238);
align-content: center;
align-items: center;
text-align: center;
justify-content: center;
margin: 0 auto;
}

.xx-main-footer ul {
margin: 0px auto;
padding: 1rem 1rem 1rem 1rem;
}

.xx-main-footer .xx-socialmedia-buttons {
color: rgb(79, 41, 88);
padding: 0px 30px;
}

.xx-main-footer .xx-socialmedia-buttons  { 
opacity: 0.6;
color: rgb(79, 41, 88);
cursor: pointer;
text-decoration: none;
justify-self: center;
padding: 0px 30px;
}

.xx-main-footer .xx-socialmedia-buttons 
.xx-main-footer .xx-socialmedia-buttons {
opacity: 0.3;
}

<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<footer class="xx-main-footer">
    	<div class="xx-socialmedia-buttons">
    		<ul>
    			<li><a href="xxx">email me</a></li>
    			<!-- <li><a href="xxx">github.com/xx</a></li> -->
    			<li><a href="xxx" target="_blank" class="fa fa-github"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-linkedin"></a></li>
    			<li><a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-facebook"></a></li>
    			<li><a href="https://www.instagram.com/xxx"rel="noopener noreferrer" target="_blank" class="fa fa-instagram"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-youtube"></a></li>
    			<li><a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-pinterest"></a></li>
    		</ul>
    	</div>
    </footer>

Answer 2

ваш комментарий FOOTER, должен быть заключен в оболочку, чтобы открыть и закрыть комментарий /*FOOTER*/ если это в вашем реальном коде, каждое правило после *FOOTER*/ не будет работать