DOMANDA Logo con link nel footer

[m3tt0]

Salve a tutti, ho un problemi che spero qualcuno possa aiutarmi a risolvere. In pratica ho creato una pagina web, mi sono aiutato con un template già esistente perché mi piaceva molto e l'ho quindi scaricato e poi integrato all'interno del web server su cui lavoro. Il problema ora è che nel footer della pagina ci sono dei loghi, che riportano appunto alle relative applicazioni, però io avrei voluto togliere uno di questi e sostituire il logo di Google+ con quello di GitHub, ho così cercato nei file che avevo scaricato del template, ma non c'è stato verso di trovare nulla, non so come proseguire.
Allego una foto di quello che è ora il footer in questione e se necessario posso anche fornire il template scaricato, spero qualcuno possa aiutarmi.

 

[Moffetta88]

Posta lo snippet del footer dove presente quei loghi.
Sicuramente sono dei font-awesome, quindi blocchi con classe fa/fas

 

[m3tt0]

Posta lo snippet del footer dove presente quei loghi.
Sicuramente sono dei font-awesome, quindi blocchi con classe fa/fas

<footer class="footer">;
     <div class="container text-center"><a class="cc-facebook btn btn-link" href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a><a class="cc-twitter btn btn-link" href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a><a class="cc-google-plus btn btn-link" href="#"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a><a class="cc-instagram btn btn-link" href="#"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></div>;
      <div class="h4 title text-center">Designer</div>;
      <div class="text-center text-muted">;
        <p>&copy; Archivio 2.0 <br>Design insipirated by- <a class="credit" href="https://templateflip.com" target="_blank">TemplateFlip</a></p>;
      </div>;
   </footer>;

 

[Dumah Brazorf]

Cerca nei css le varie classi cc-facebook, fa-google-plus... dovresti trovare il link alle immagini.

 

[m3tt0]

io non ho trovato i file che dicevi. metto qui i file css in formato testo, non li metto come codice perché sono veramente troppo lunghi e poi sono tre file differenti, se per caso riusciste a darmi una mano

 

[Dumah Brazorf]

cc-facebook etc li ho trovati ma non sono loro, mancano i fa-facebook etc. Sono da un'altra parte, cerca nella testata della pagina da dove carica gli stylesheet, magari li scarica direttamente da un altro sito ma mi par strano che tu non abbia una cartella font-awesome o un file font-awesome.min.css

 

[m3tt0]

cc-facebook etc li ho trovati ma non sono loro, mancano i fa-facebook etc. Sono da un'altra parte, cerca.

questi sono gli unici file .css che ho, poi ci sono file .js e neanche lì ho trovato qualcosa del genere, se necessario posso pubblicare i file .js

 

[Edmund Blackadder]

Nel codice del footer che hai postato il link con il logo di Google Plus dovrebbe essere:

<a class="cc-google-plus btn btn-link" href="#">
<i class="fa fa-google-plus fa-2x" aria-hidden="true"></i>
</a>

 

[m3tt0]

Nel codice del footer che hai postato il link con il logo di Google Plus dovrebbe essere:

<a class="cc-google-plus btn btn-link" href="#">
<i class="fa fa-google-plus fa-2x" aria-hidden="true"></i>
</a>

il codice infatti è così

 

[Moffetta88]

fa fa-google-plus fa-2x
Come ti dicevo, è fontAwesome.

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

Cambialo con quello relativo a github

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

 

[m3tt0]

fa fa-google-plus fa-2x
Come ti dicevo, è fontAwesome.

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

Cambialo con quello relativo a github

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

Ho messo il kit che mi ha fornito Font Awesome e adesso però mi ritrovo così come nella foto, ma il colore del logo dovrebbe essere nascosto finché non ci passo sopra col puntatore del mouse, mi sapresti aiutare ?

 

[Moffetta88]

hai cambiato solo la classe del <i> o anche della <a> relativa a quell'icona ?
Perchè visto che non hai la classe, devi lasciare nel <a> la classe cc-google-plus
Di fatto devi fare così:

<a class="cc-google-plus btn btn-link" href="#">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>

oppure mettere nel file ccs una riga così:

.cc-github:hover i {
  color: #dd4b39; //colore che vuoi
}

e metti il codice di prima così

<a class="cc-github btn btn-link" href="#">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>

 

[m3tt0]

hai cambiato solo la classe del <i> o anche della <a> relativa a quell'icona ?
Perchè visto che non hai la classe, devi lasciare nel <a> la classe cc-google-plus
Di fatto devi fare così:

<a class="cc-google-plus btn btn-link" href="#">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>

oppure mettere nel file ccs una riga così:

.cc-github:hover i {
  color: #dd4b39; //colore che vuoi
}

e metti il codice di prima così

<a class="cc-github btn btn-link" href="#">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>

okay perfetto, avevi ragione, sono riuscito a fare ciò che volevo, però se volessi cambiare il colore, (che è ovviamente rosso visto che era per googlePlus) dovrei cambiarlo all'interno della classe che però non so quale sia, giusto ? oppure posso cambiarne colore anche in un altro modo ? grazie mille ancora

 

[Moffetta88]

Te l'ho scritto come fare.
Nel file main.css metti

.cc-github:hover i {
  color: #dd4b39; //colore che vuoi
}

e metti il codice di prima così

<a class="cc-github btn btn-link" href="#">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>

facendo così editi creai una nuova classe.

 

[m3tt0]

Te l'ho scritto come fare.
Nel file main.css metti

.cc-github:hover i {
  color: #dd4b39; //colore che vuoi
}

e metti il codice di prima così

<a class="cc-github btn btn-link" href="#">
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
</a>

facendo così editi creai una nuova classe.

Mi correggo, ti ringrazio, sono riuscito a fare tutto, grazie mille per l'aiuto.