News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Social Icons with Font Awesome 6

Started by -Rock Lee-, February 21, 2023, 05:56:46 PM

Previous topic - Next topic

-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!

¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Diego Andrés

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

TwitchisMental

Quote from: -Rock Lee- on February 21, 2023, 05:56:46 PMI'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?
font-family: "Font Awesome 6 Free";

-Rock Lee-

Quote from: Diego Andrés on February 21, 2023, 05:59:07 PMIf 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.

Quote from: TwitchisMental on February 21, 2023, 06:27:36 PMHow are you loading Font Awesome itself? Locally or Externally?

In your social icons section are you loading the font-family?
font-family: "Font Awesome 6 Free";

.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
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

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?

SMF Tricks - Free & Premium Responsive Themes for SMF.

-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:

/* 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:

// 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>';
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

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/*

SMF Tricks - Free & Premium Responsive Themes for SMF.

-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).
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Diego Andrés

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

-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:

// load in any css from mods or themes so they can overwrite if wanted
template_css();
loadCSSFile('../css/all.min.css', array('minimize' => true));
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

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));

SMF Tricks - Free & Premium Responsive Themes for SMF.

-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.
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

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>

SMF Tricks - Free & Premium Responsive Themes for SMF.

-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?
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

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.

SMF Tricks - Free & Premium Responsive Themes for SMF.

-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.
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Diego Andrés

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

-Rock Lee-

Quote from: Diego Andrés on February 21, 2023, 10:20:18 PMI 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!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Advertisement: