How to manage size of facebook and instagram buttons

1

I have this line of code:

<div class="f-social">
                        <a href="https://www.facebook.com/ForumGiovaniLendinara/" target="_blank"><i class="fa fa-facebook"></i></a>
                        <a href="https://instagram.com/fglendinara/" target="_blank"><i class="fa fa-instagram"></i></a>
                        <a href="https://www.youtube.com/channel/UC0MgpsF3TSRVWlfVzsousEw" target="_blank"><i class="fa fa-youtube-play"></i></a>
                    </div>

when I save it in Yola’s editor for websites it gives me buttons with a small size.
How can I manage it?

2

Hey,
you can control the size with an inline style, like this one :

    <div class="f-social">
        <a href="https://www.facebook.com/ForumGiovaniLendinara/" target="_blank"><i class="fa fa-facebook" style="font-size:48px;"></i></a>
        <a href="https://instagram.com/fglendinara/" target="_blank"><i class="fa fa-instagram" style="font-size:48px;"></i></a>
        <a href="https://www.youtube.com/channel/UC0MgpsF3TSRVWlfVzsousEw" target="_blank"><i class="fa fa-youtube-play" style="font-size:48px;"></i></a>
    </div>
3

it works.
How can put more space between one icon and another?

4

You can add this within your css code :

a {
 margin-right: 15px;
   }
5

I’m not an expert, can you embed it in the last code you provided?

6 
<div class="f-social">

        <a href="https://www.facebook.com/ForumGiovaniLendinara/" target="_blank"><i class="fa fa-facebook" style="font-size:48px; margin-right: 15px;"></i></a>

        <a href="https://instagram.com/fglendinara/" target="_blank"><i class="fa fa-instagram" style="font-size:48px; margin-right: 15px;"></i></a>

        <a href="https://www.youtube.com/channel/UC0MgpsF3TSRVWlfVzsousEw" target="_blank"><i class="fa fa-youtube-play" style="font-size:48px; margin-right: 15px;"></i></a>

    </div>
7

thank you!
now it doesn’t show the icons.
where should I retrieve them?

8

You need this line in the head section of your html page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
9

when I try to place it, it turns down other elements.
can you show me, please?

10

can you share the source code

11

I’m using Yola’s website manager, there is an HTML widget that I am filling with HTML code so I don’t think there’s a proper source code.
But again, I’m not an expert.

12

HTML code is the source code, so you can put it in message .

1 Like
13

here it is the whole text I wrote

<div class="f-social">

        <a href="https://www.facebook.com/ForumGiovaniLendinara/" target="_blank"><i class="fa fa-facebook" style="font-size:48px; margin-right: 15px;"></i></a>

        <a href="https://instagram.com/fglendinara/" target="_blank"><i class="fa fa-instagram" style="font-size:48px; margin-right: 15px;"></i></a>

        <a href="https://www.youtube.com/channel/UC0MgpsF3TSRVWlfVzsousEw" target="_blank"><i class="fa fa-youtube-play" style="font-size:48px; margin-right: 15px;"></i></a>

    </div>
14

the out put should be like this :

fdgt
can you take a screenshot of your output.

15

the output is that one, but I don’t know why, when I publish the site, it doesn’t show the icons.
Here it is in the editor

image
image1920×626 141 KB

16

and here it is in the published page

image
image1920×702 161 KB

17

I don’t know why it doesn’t work after publishing, but you can click on help and contact us in YOLA and describe this issue, I wish you get quickly an answer from there team.

18

I will try. :+1:
In the meantime, thank you so much for the help!

19

you are welcome Donatella

20

I added this part of code and now it works!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>