Social Icons with Font Awesome 6

[-Rock Lee-]

I've been trying for a while as I read and look for references, I was looking at other themes to be able to guide myself too. But I can't get it to work as far as I get, it's as an attachment in the image but I suspect I'm missing importing the css but even if I follow other themes I can't apply it correctly.

You cannot view this attachment.

Copy the necessary files, edit the css a bit but in all of them it marks me using an external library but even though I put it it doesn't take it. The base is theme by default... if you can give me a link that would be great.


Regards!

[Diego Andrés]

If you are loading it locally from the theme files, make sure you added the fonts as well.

[TwitchisMental]

I've been trying for a while as I read and look for references, I was looking at other themes to be able to guide myself too. But I can't get it to work as far as I get, it's as an attachment in the image but I suspect I'm missing importing the css but even if I follow other themes I can't apply it correctly.

You cannot view this attachment.

Copy the necessary files, edit the css a bit but in all of them it marks me using an external library but even though I put it it doesn't take it. The base is theme by default... if you can give me a link that would be great.


Regards!

How are you loading Font Awesome itself? Locally or Externally?

In your social icons section are you loading the font-family?

Code Select Expand

font-family: "Font Awesome 6 Free";

[-Rock Lee-]

If you are loading it locally from the theme files, make sure you added the fonts as well.

I was just basing myself on your namex theme that made it clearer for me how to do it, I copied all the sources and it would have to display it correctly.

How are you loading Font Awesome itself? Locally or Externally?

In your social icons section are you loading the font-family?

Code Select Expand

font-family: "Font Awesome 6 Free";

Code Select Expand

.social_icons {
display: flex;
justify-content: flex-end;
gap: 8px;
font-family:var(--fa-style-family,"Font Awesome 6 Free");
flex-grow: 1;
}
I have it locally then looking at one of your themes I tried doing it externally in case it was my problem but neither... which makes me doubt if I applied it well but it looks halfway

[Diego Andrés]

Could you share all of the bits you have?
How are you loading it?
What html markup are you using? The same as the fontawesome site?

[-Rock Lee-]

I'm not sure to answer everything but basically in the css folder I have this...

You cannot view this attachment.

along with the two adjuncts. And in the index.css add:

Code Select Expand

/* Socials */
.social_icons {
display: flex;
justify-content: flex-end;
gap: 8px;
flex-grow: 1;
}
.social_icons a {
font-size: 0.9em;
--social-icon-light: 58%;
width: 25px;
padding: 3px 0;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
text-decoration: none;
}
.social_icons a:hover {
--social-icon-light: 40%
}
.social_icons a.facebook {
background-color: hsl(213, 99%, var(--social-icon-light));
}
.social_icons a.twitter {
background-color: hsl(204, 88%, var(--social-icon-light));
}
.social_icons a.instagram {
background-color: hsl(326, 57%, var(--social-icon-light))
}
.social_icons a.youtube {
background-color: hsl(0, 100%, var(--social-icon-light));
}
.social_icons a.tiktok {
background-color: hsl(178, 90%, var(--social-icon-light));
}
.social_icons a.twitch {
background-color: hsl(264, 100%, var(--social-icon-light));
}
.social_icons a.discord {
background-color: hsl(235, 86%, var(--social-icon-light));
}
.social_icons a.steam {
background-color: hsl(213, 35%, var(--social-icon-light));
}
.social_icons a.github {
background-color: hsl(0, 0%, var(--social-icon-light));
}
.social_icons a.linkedin {
background-color: hsl(210, 90%, var(--social-icon-light));
}
.social_icons a.rss {
background-color: hsl(25, 85%, var(--social-icon-light));
}
.social_icons a i {
color: hsl(0, 0%, 100%)
}
and index.template.php:

Code Select Expand

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']) && !empty($context['random_news_line']))
echo '
<div class="news">
<div class="social_icons">';

// Facebook
if (!empty($settings['facebook']))
echo '
<a href="https://facebook.com/' . $settings['facebook'] . '" target="_blank" rel="noopener" class="facebook">', icon('fab fa-facebook-f'), '</a>';

// Twitter
if (!empty($settings['twitter']))
echo '
<a href="https://twitter.com/' . $settings['twitter'] . '" target="_blank" rel="noopener" class="twitter">', icon('fab fa-twitter'), '</a>';

// Instagram
if (!empty($settings['instagram']))
echo '
<a href="https://instagram.com/' . $settings['instagram'] . '" target="_blank" rel="noopener" class="instagram">', icon('fab fa-instagram'), '</a>';

// Youtube
if (!empty($settings['youtube']))
echo '
<a href="' . $settings['youtube'] . '" target="_blank" rel="noopener" class="youtube">', icon('fab fa-youtube'), '</a>';

// TikTok
if (!empty($settings['tiktok']))
echo '
<a href="https://tiktok.com/@' . $settings['tiktok'] . '" target="_blank" rel="noopener" class="tiktok">', icon('fab fa-tiktok'), '</a>';

// Twitch
if (!empty($settings['twitch']))
echo '
<a href="https://twitch.tv/' . $settings['twitch'] . '" target="_blank" rel="noopener" class="twitch">', icon('fab fa-twitch'), '</a>';

// Discord
if (!empty($settings['discord']))
echo '
<a href="' . $settings['discord'] . '" target="_blank" rel="noopener" class="discord">', icon('fab fa-discord'), '</a>';

// Steam
if (!empty($settings['steam']))
echo '
<a href="' . $settings['steam'] . '" target="_blank" rel="noopener" class="steam">', icon('fab fa-steam-symbol'), '</a>';

// GitHub
if (!empty($settings['github']))
echo '
<a href="' . $settings['github'] . '" target="_blank" rel="noopener" class="github">', icon('fab fa-github'), '</a>';

// LinkedIn
if (!empty($settings['linkedin']))
echo '
<a href="' . $settings['linkedin'] . '" target="_blank" rel="noopener" class="linkedin">', icon('fab fa-linkedin'), '</a>';

// RSS
if (!empty($settings['rss_url']))
echo '
<a href="' . $settings['rss_url'] . '" target="_blank" rel="noopener" class="rss">', icon('fas fa-rss'), '</a>';

echo '
</div>
</div>';

echo '
</div>';

[Diego Andrés]

Are you loading the css correctly in the index.template.php? Meaning, from the correct location that you uploaded it, and the correct name?
Followed by this, fontawesome will attempt to load the fonts from /webfonts.
So if you added the all.min.css file to the css folder: theme/css/all.min.css
You'll need to have the fonts in theme/webfonts/*

[-Rock Lee-]

I am adding directly to the default theme to make sure it loads, will I have to do it separately? Or is it not loading all.min.css?

Copy webfonts both in ../theme/ and ../theme/css/ and even inside font thinking that was it (change the name just in case and it breaks the rest but even if it doesn't load).

[Diego Andrés]

Could you show how are you loading the file?
Did you try using the loadCSSFile function?

[-Rock Lee-]

I don't know if it's right, I'm still not totally sure how it goes, but in the same index.template I put it:

Code Select Expand

// load in any css from mods or themes so they can overwrite if wanted
template_css();
loadCSSFile('../css/all.min.css', array('minimize' => true));

[Diego Andrés]

The function loads from the css folder already, you just need to put the name of the file, no need to go up/back in folders.
loadCSSFile('all.min.css', array('minimize' => true));

[-Rock Lee-]

Ah, I'm going to take it into account, I just tried it but it doesn't have a change, it doesn't load as it should, it appears the same as at the beginning. Is it the way I call it? Is it not recognizing icon? in ', icon('fab fa-facebook-f'), ' although I tried several ways, none shows it correctly.

[Diego Andrés]

What does the icon function do?
You could just use the original syntax from font awesome for each icon.
<i class=""></i>

[-Rock Lee-]

The truth is really only as it was in the example, but it has no effect, that's why I put them directly in the others. But the word skips like the last one, which is RSS, and in another, only the background appears. It should show correctly according to the examples and from the browser console it does not show any errors, therefore it must have loaded correctly, right?

[Diego Andrés]

You can check with the inspector tool in the browser and look for the pseudo element to make sure it's loading the correct properties.
Also, check with the option to minimize files disabled, if the css file is indeed loading inside the head tag.

[-Rock Lee-]

If I have it disabled to test, I am also without cache because modifying other things happened to me but not in this case.

You cannot view this attachment.

Hmm... it's loaded it should show it unless I'm wrong.

[Diego Andrés]

I think your issue is that you are supposed to load the CSS before template_css();.

[-Rock Lee-]

I think your issue is that you are supposed to load the CSS before template_css();.

Indeed, it seems that when I put it after it does not take it, but if I put it before it works as it should, I will take it into account in the future!


Regards!