XF 2.3 Conflict with icons fa 2.3.2

A

acdcadicto

Member
Since the last update I have noticed a problem with my fa icons that give access to social networks, this happens approximately 50% of the time. The place where the icons should go flashes and the problem is usually eliminated when reloading the page, but it reappears.

The icons are in the footer, I give an example of how it looks and what it should look like. The url of the forum is: https://www.forocrimenymisterio.com

I am asking for help in case there is something in the code that causes this conflict. Thank you

CODE PAGE_CONTAINER
Code: 
<footer class="p-footer" id="footer">
    <div class="horizontal">
  <div class="horizontal__content">
      <div class="socialcons">
          

    <nav class="nav">     
    <ul>
<li><a href="https://www.facebook.com/profile.php?id=61555315989859" target="_blank" title="Entra en nuestro grupo de Facebook"><i class="fab fa-facebook" data-xf-init="icon" alt="Facebook"></i></a></li>
<li><a href="https://twitter.com/fcrimenmisterio" target="_blank"  title="Visita nuestro perfil de Twitter"><i class="fab fa-twitter" data-xf-init="icon" alt="Twitter"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCmc4RnWvxUhKY7fXASMX44A" target="_blank" title="Visita nuestro canal de Youtube"><i class="fab fa-youtube" data-xf-init="icon" alt="Youtube"></i></a></li>
<li><a href="https://www.instagram.com/fcrimenmisterio/" target="_blank" title="Síguenos en Instagram"><i class="fab fa-instagram" data-xf-init="icon" alt="Instagram"></i></a></li>
<li><a href="https://t.me/forocrimenymisterio" target="_blank" title="Entra en nuestro grupo de Telegram"><i class="fab fa-telegram" data-xf-init="icon" alt="Telegram"></i></a></li>
<li><a href="https://whatsapp.com/channel/0029VaIywmD8PgsJnMwGTD0q" target="_blank" title="Entra en nuestro canal de Whatsapp"><i class="fab fa-whatsapp" data-xf-init="icon" alt="Whatsapp"></i></a></li>
</ul>
          </nav>
</div>
    </div>
        </div>

View attachment RPReplay_Final1722663223.movIMG_9029.webp
 
Sort by date Sort by votes
I don't know if it's related but you used the old Font Awesome syntax for you icons

OLD
HTML: 
<i class="fab fa-facebook" data-xf-init="icon" alt="Facebook"></i>
NEW
Less: 
<xf:fa icon="fab fa-facebook" alt="Facebook" />
Chris D

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Font Awesome improvements​

On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.

We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with...
  • Like
  • Love
  • Wow

Try to update your code in consequence. 🤷‍♂️
 
Upvote 0 Downvote
After that, maybe you can make your HTML coding simpler, why are you using 4 classes then a list to display your social block?

1722676843656.webp

position: relative
HTML: 
.horizontal {
    position: relative;
    text-align: center;
    top: 10px;
    height: 100px;
    left: -20px;
    width: 100%;
    font-size: 15px;
    color: #ffffff;
}

position: absolute
HTML: 
.horizontal__content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Then socialcons and nav classes without any attribut.

The mix between absolute and relative positions probably causes this shaking of the icons.
 
Last edited:
Upvote 0 Downvote
Perfect, I have modified everything you told me and I have left only the relative position code. Everything seems to work fine. I appreciate it a lot.

Apologies for my inexperience, I still have a lot to learn.

Thank you
 
Upvote 0 Downvote
@Old Nick Would you be so kind as to help me again? I have noticed that the prompt to log in or register also has that strange effect. I have tried to find the problem but I can't find the solution. Could you help me? Thank you!

View attachment RPReplay_Final1724190791.mov


HTML WARNING
Code: 
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenida al Foro</title>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            margin-top: 50px;
        }
        .contenedor-botones {
display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .boton {
            background-color: #333;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .boton i {
            margin-right: 8px;
        }
        .boton:hover {
            background-color: #555;
text-decoration: none;
        }
        .tabla-botones {
            display: inline-block;
        }
        p {
            font-size: 18px;
            max-width: 600px;
            margin: 20px auto;
            text-align: center;
        }
    </style>
</head>
<body>

    <p><strong>Bienvenido/a a forocrimenymisterio.com</strong></p>
        
    <p>forocrimenymisterio.com se actualiza continuamente con las últimas noticias de la crónica negra, pero te necesitamos a ti para crecer.</p>
        
        <p>No dudes en registrarte para acceder a nuestro contenido.
    </p>

    <div class="contenedor-botones">
        <div class="tabla-botones">
            <a href="/login/" class="boton" data-xf-click="overlay" data-follow-redirects="on"><i class="fas fa-key" data-xf-init="icon"></i> Acceder</a>
        </div>
        <div class="tabla-botones">
            <a href="/register/" class="boton" data-xf-click="overlay" data-follow-redirects="on"> <i class="fas fa-plus" data-xf-init="icon"></i> Regístrate</a>
        </div>
    </div>
 
Upvote 0 Downvote
Put this code in your extra.less template:
Less: 
.contenedor-botones {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.boton {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
.boton i {
    margin-right: 8px;
}
.boton:hover {
    background-color: #555;
    text-decoration: none;
}
.tabla-botones {
    display: inline-block;
}
p {
    font-size: 18px;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}

And this code to the notice field:
HTML: 
<p><strong>Bienvenido/a a forocrimenymisterio.com</strong></p>
<p>forocrimenymisterio.com se actualiza continuamente con las últimas noticias de la crónica negra, pero te necesitamos a ti para crecer.</p>
<p>No dudes en registrarte para acceder a nuestro contenido.</p>

<div class="contenedor-botones">
    <div class="tabla-botones">
        <a href="/login/" class="boton" data-xf-click="overlay" data-follow-redirects="on"><i class="fas fa-key" data-xf-init="icon"></i> Acceder</a>
    </div>
    <div class="tabla-botones">
        <a href="/register/" class="boton" data-xf-click="overlay" data-follow-redirects="on"> <i class="fas fa-plus" data-xf-init="icon"></i> Regístrate</a>
    </div>
</div>
That should enough...
 
Upvote 0 Downvote
For your buttons, use the XF button class then your boton class to add customization.
button already contains the basic button formatting attributes (:hover is already managed also...). boton will just allow you to change the color or that sort of thing...

So you can write your code buttons like this:
Code: 
<a href="/register/" class="button boton" data-xf-click="overlay" data-follow-redirects="on"> <i class="fas fa-plus" data-xf-init="icon"></i> Regístrate</a>

For your boton class, just this for example...
Less: 
.boton {
    background-color: #333;
    border: none;
    padding: 10px 20px;
    transition: background-color 0.3s;
}
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom