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.
socials.png
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!
If you are loading it locally from the theme files, make sure you added the fonts as well.
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.
[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285793;type=preview;file"]socials.png[/url]
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";
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
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?
I'm not sure to answer everything but basically in the css folder I have this...
1.png
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>';
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/*
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).
Could you show how are you loading the file?
Did you try using the loadCSSFile function?
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));
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));
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.
What does the icon function do?
You could just use the original syntax from font awesome for each icon.
<i class=""></i>
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?
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.
If I have it disabled to test, I am also without cache because modifying other things happened to me but not in this case.
2.png
Hmm... it's loaded it should show it unless I'm wrong.
I think your issue is that you are supposed to load the CSS before template_css();.
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!