Changing Icon for Social Links

Beginners
1

Hello,

I am trying to develop a quick and simple page. I just want to know how to change the second LinkedIn icon/image in the attached screenshot to an envelope/email icon.

Thank you,

Mana
Screen Shot 2022-03-01 at 11.58.28 AM

2

Hi @manaptb,
Can you give some more details for you project and the current code for this block? Are you using fontawesome, or…?
With fontawesome you will have to work a little to get the size and colors right, but it will be a stacked icon, something like:

<span class="fa-stack fa-lg">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
</span>

Hope this helps,
Bob

3

I am using the “Spacera” template. I got everything else as I want, but I cannot get that to change. the coding currently is:

</svg> </a> <a href="https://www.linkedin.com/company/omnisivus" aria-label="linkedin" class="btn btn-light link-secondary m-2 p-2 rounded-circle"> <svg viewBox="0 0 24 24" fill="currentColor" width="1.5em" height="1.5em" class="d-block"> 
                                <path d="M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002zM7 8.48H3V21h4V8.48zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68z"/> 
                            </svg> </a>
                        <a href="https://www.linkedin.com/company/omnisivus" aria-label="linkedin" class="btn btn-light link-secondary m-2 p-2 rounded-circle"> <svg viewBox="0 0 24 24" fill="currentColor" width="1.5em" height="1.5em" class="d-block"> 
                                <path d="M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002zM7 8.48H3V21h4V8.48zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68z"/>

It seems I need to draw the envelope using the path, but I don’t know how to do that.

4

Hi @manaptb,
I would suggest trying to find an SVG icon by searching the web. Then you just have to change out the SVG.
Cheers,
Bob

5

Thanks a lot, Rob. I really appreciate the help.

I found some SVG, and changed them out. But for some reason the background became ovals, even though all I changed was the source of the image.

<div class="bg-secondary d-flex flex-column justify-content-center pb-4 pt-4 text-center"> 
                <div class="container"> 
                    <div class="d-inline-flex flex-wrap"> <a href="#" aria-label="twitter" class="btn btn-light link-secondary m-2 p-2 rounded-circle"> <svg viewBox="0 0 24 24" fill="" width="1.5em" height="1.5em" class="d-block"> 
                                <img src="twitter.svg"> 
                            </svg> </a> <a href="#" aria-label="linkedin" class="btn btn-light link-secondary m-2 p-2 rounded-circle"> <svg viewBox="0 0 24 24" fill="" width="1.5em" height="1.5em" class="d-block"> 
                                <img src="link.svg"> 
                            </svg> </a> <a href="#" aria-label="mail" class="btn btn-light link-secondary m-2 p-2 rounded-circle"> <svg viewBox="0 0 24 24" fill="" width="1.5em" height="1.5em" class="d-block"> 
                                <img src="email.svg"> 
                            </svg> </a> 
                    </div>                     
                </div>                 
            </div>

Any idea why that happened?

I have tried different SVG files, and it happens regardless. It happens in Pinegrow, and all browsers
Screen Shot 2022-03-02 at 4.52.59 PM

6

Hi @manaptb,
Not totally sure. I think you may have to fool around with the width and height attributes. Do you need the outer SVG tag?
Bob

7

I have played around with the numbers, it is still leaving above the images (with the white background removed by me) as clickable. For some reason the container, regardless of the PT or MT numbers I try above the images is clickable as well.

What I am looking to do is just have the 3 icons be clickable links. Just the circle parts of the image. It does not need to be SVG,

8

Hi @manaptb,
You could try using fontawesome 5 icons instead. You can activate the library from the File → Manage libraries & plugins menu. Once added you can drag a “FA stacked icon” from the library to your page and change the inner icon.
Cheers,
Bob

9

Thanks very much. It doesn’t have an email icon though. But it is fine. I will just leave it as it is for now. I removed the white background to it. Regardless of how I adjust the measurements I still have the area in blue above the icons clickable.

I have tried to shrink the size of the area above the icons through the padding and margin settings, but it just won’t. I am going to leave it as is for the time being.

Thanks for your help.

What sort of programming do you do/know?
Omnis_Screenshot

10

Depends on the project. HTML and CSS where needed. Plain JavaScript/Node.js for Pinegrow plugins. JSX/React and PHP for Divi plugins and WordPress. C# for Unity. R, Matlab, and a touch of Python for data analysis. I’ve dabbled in Java, but hate it. Fooled with both Fortran and Cobol, eons ago, but wouldn’t feel competent doing anything with them now.