ativa rede social Como ativar as rede social conforme e colocado o link

[Jack Oliveira 1]

Ola boa noite amigos 

Queria saber de vocês aqui de como eu consigo ativa as rede social no site conforme elas for posta a url no input no painel

Obs: Eu já vi isso uma vez em um site de demostração porém não consegui localizar o site 

Mais o que eu me lembro seria mais o menos assim

No ADMIN

<div class="col-md-6">										
	<div class="form-group">
<label>Facebook:</label>
		<input class="form-control" name="facebook" value="#">
</div>
	</div>
<div class="col-md-6">										
	<div class="form-group">
<label>Twitter:</label>
		<input class="form-control" name="twitter" value="#">
</div>
	</div>
<div class="col-md-6">										
	<div class="form-group">
<label>Instagram:</label>
		<input class="form-control" name="instagram" value="#">
</div>
	</div>
<div class="col-md-6">										
	<div class="form-group">
<label>WhatsApp:</label>
		<input class="form-control" name="whatsapp" value="#">
</div>
	</div>

Dentro do value="#" tinha o # se deixar ele, ele não aparace aquela rede social no site

se tirar e colocar o link da rede social por ex: FACEBOOK <input class="form-control" name="facebook" value="https://www.facebook.com/nome-da-pagina/">

e salva o facebook aparece dentro do site

Seria mais o menos isso na pagina no site

	<div class="social_icons">
		<ul>
			<li><a href="https://www.facebook.com/nome-da-pagina/"><i class="fa fa-facebook"></i></a></li>
			<li><a href="#"><i class="fa fa-twitter"></i></a></li>
			<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="#"><i class="fa fa-instagram"></i></a></li>
			<li><a href="#"><i class="fa fa-youtube"></i></a></li>
			<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
			<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
		</ul>
	</div>

O que eu quero saber se para que isso aconteça como eu posso usar o if e else para fazer este processo todo. Ou qual maneira eu posso usar isso

Lembrando que quando o # estiver na url todas as rede social que estiver ela ela fica off mais conforme e colocado o link a rede social ela apareça no site

 

Bom galera espero que possam entender o que eu descrevi ai...

 

Desde já agradeço a todos....

[Gleyson Abreu 49]

Se entendi bem você quer remover/esconder o html do icon caso não tenha links associados a ele?

Se for, eu bolei um código em javascript que pode lhe ajudar:

var variaveis_li = document.querySelectorAll(".social_icons ul li");

  for(i = 0; i < variaveis_li.length; i++){
    var variaveis_a = document.querySelectorAll(".social_icons ul li a");
    if( variaveis_a[i].getAttribute("href") == "#" || variaveis_a[i].getAttribute("href") == "" ){
        variaveis_li[i].style.display = 'none';
    }
  }

veja funcionando https://playcode.io/457077?tabs=script.js,preview

[Jack Oliveira 1]

1 hora atrás, Gleyson Abreu disse:

Se entendi bem você quer remover/esconder o html do icon caso não tenha links associados a ele?

Se for, eu bolei um código em javascript que pode lhe ajudar:

var variaveis_li = document.querySelectorAll(".social_icons ul li");

  for(i = 0; i < variaveis_li.length; i++){
    var variaveis_a = document.querySelectorAll(".social_icons ul li a");
    if( variaveis_a[i].getAttribute("href") == "#" || variaveis_a[i].getAttribute("href") == "" ){
        variaveis_li[i].style.display = 'none';
    }
  }

veja funcionando https://playcode.io/457077?tabs=script.js,preview

Boa tarde mano, @Gleyson Abreu Isso mesmo amigo igual que eu vi tinha visto no site ele só parece quando é colocado o link ficou top mano era isso mesmo que eu queria fico muito grato pela ajuda e por ter intendendo....