Social Media Icons with Font Awesome

hellojensi · May 9, 2020, 11:48 PM

Hey.

I’m just working on my wordpress-site and I wanted to include some icons as a link to my social media accounts.

By description the plug-in Font Awesome seemed like the right tool to do it, so I installed and activated it.

I tried to add a stroopwafel-symbol by adding "HTML" and then entering this <i class=fas fa-stroopwafel"></i>-thingy.

I also tried to add the same thing as a "shortcode" ([icon name="stroopwafel"]).

Neither worked out, there is no stroopwafel-symbol showing up when reloading the project page.

What am I doing wrong? Any ideas?

Thanks in advance

j.

mariusjopen · wrote on May 6, 2020, 3:20 PM

Dear @hellojensi
stroopwafel-symbol :-D

Not sure if Fontawesome works.
Will check with Armin.
Best!
Marius

arminunruh · May 14, 2020, 5:57 PM

link link link?

aerotec · May 9, 2020, 7:52 PM

@hellojensi

Hello, Font Awesome works great with lay. I use it like that:

Sign in at font Awesome and create a free kit.
When your Kit is created you get a script code.
Copy the script code to the <head> section at lay's Custom CSS & HTML.

I use links and script in the <head> section

  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/ae25ce5210.js" crossorigin="anonymous"></script>

After this i put the Font Awesome Snippet i want in the html section of my Text for example:

<p style="text-align: left;"><i class="fa fa-envelope-square fa-lg"></i> <a href="mailto:info@yoursite.de">E-Mail</a></p>

And when you want to customize each icon you can again use the Custom CSS like this:

.fa-fish {
    color: salmon;
  }

  .fa-envelope-square, .fa-calendar-check-o, .fa-map-marker-alt, .fa-link {
    color: dodgerblue;
  }
  
    .fa-phone-square-alt {
    color: dodgerblue;
  }

  .fa-user-ninja.vanished {
    opacity: 0.0;
  }

  .fa-facebook {
    color: rgb(59, 91, 152);
  }

mariusjopen · wrote on May 11, 2020, 8:19 AM

Dear @aerotec
Thank you for helping!
We appreciate the time people take to make the LayTheme community stronger.
Best!
Marius

hellojensi · wrote on May 14, 2020, 5:57 PM

@arminunruh That’s www.thejensstein.com … I’m not very good at this internet stuff (aka css), but I managed to create a font out of the symbols I wanted to use with some tool called icomoon and it worked out fine for my footers.

The Font Awesome-advice by aerosec looks reasonable but I’m lazy right now.

hellojensi · wrote on May 14, 2020, 6:00 PM

@aerotec I’ll have to try that one. I figured out a more complicated – and probably ridiculous – way to get a similar result, but I understand the advantages of using CSS and will have a go at it.

Thank you very much.

j.

mariusjopen · wrote on May 18, 2020, 5:28 PM

Dear @aerotec
let me know where I can help :-)
Best!
Marius

Lay Theme Forum

Social Media Icons with Font Awesome

Before you post:

When you post:

Online Users