Comments (3)
Hi, so this is giving you a Chinese character because there is a font family property in the icon class in the main.css file. This is theme is mostly optimized for using font awesome icons but I was able to get around that and did get your academicons working along with font awesome icons. Here is how I did that:
Like you did, I downloaded the font files and the CSS file and placed them in their prospective folders (static/css/academicons.min.css) (static/fonts/all the font files). You linked the custom css correctly the in config.toml file with custom_css = ["css/academicons.min.css"]. The problem is that those social icons have an icon css class applied to them that specifically states the font family to be fontawesome so when you try and use another font family the webpage does not recognize the font to be in the font family, giving you weird characters. Doing this in the config.toml file won't work.
[[params.footer.social]]
icon = "ai-dataverse"
url= "https://www.linkedin.com"
label = "LinkedIn"
Since I am unable to apply different CSS classes to the same range of elements. I recommend just coding in a separate icon in the footer.html partial. If you haven't already I recommend copying the layouts folder YourSiteDirectory/themes/forty/layouts
into your own site layouts folder YourSiteDirectory/layouts
Place this code in the footer.html partial underneath the {{ end }}
of the {{ range .Site.Params.Footer.social }}
:
<li><a href="#" class="icon alt ai ai-orcid" target="_blank"><span class="label"></span></a></li>
I added a css class, ai
to this new element. to actually give properties to this new CSS class we have to edit the main.css file. Again I would recommend copying this file from the YourSiteDirectory/themes/forty/static/main.css
location and moving it to the same spot that you placed your academicon.css file in the static folder. Once you do that go into the main.css file do a search for Icon. It should bring you to the /* Icon */
section in the CSS file. Right below the code
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
add in this code:
.ai:before{
font-family: Academicons;
}
One last step, in the main.css file at the top of the file you should also import your academicons.min.css file. So insert this code at the very first line of the main.css file:
@import url(academicons.min.css);
Once I completed these steps I got the final result
Both icon sets still work and the same styling is also applied to both. Let me know if you had any questions or issues with the steps I provided. Thanks for using this theme!
from forty.
Hi, thank you so much for your detailed answer. It works like a charm.
I also noticed that this:
[[params.footer.social]]
icon = "ai-osf"
url= "https://osf.io"
label = "OSF"
should also work in the config.toml
if we specify academicons as ai ai-icon
, instead of ai-icon
(example below).
[[params.footer.social]]
icon = "ai ai-osf"
url= "https://osf.io"
label = "OSF"
Thanks !
from forty.
Yes I see now that it would work since the icon front matter value is being inserted into the class definition. It is best to keep as much content as you can in the config.toml file for easy configuration. Nice job with that. I am glad my solution worked for you, thanks again!
from forty.
Related Issues (20)
- Missing package.json? HOT 1
- Allow templates to work for different content sections (other than 'blogs')
- Images missing max-width property HOT 2
- email address link is stubbed out
- 发送 message 是部署之后调内置的接口还是自己设置 HOT 1
- Want a paging configuration options.
- Is it possible to place the Navigation Links in the header? HOT 2
- The site runs fine on my laptop, but does not render correctly on Netlify. HOT 1
- Using Landing instead of Generic
- $window.on('load pageshow', function() doesn't work on mbile devices
- Support multi language sites
- Please add support for custom CSS HOT 3
- Changing colors HOT 1
- Support for Math Typesetting HOT 1
- Subtitle not showing on mobile
- Using Newer jQuery (`3.x`) Makes the Menu Malfunctioning on Reload HOT 4
- Using Hugo Notice and Button shortcodes?
- Compatibility Issue with Safari and Opera - Incorrect Image Paths HOT 7
- tel: link HOT 2
- SOLVED site not properly rendered HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from forty.