Using Awesome font in an SVG

Question

Using Awesome font in an SVG

Asked 4 years, 9 months ago

Viewed 327 times

1

I’m trying to put an icon font awesome within my SVG.

I am based on this tutorial:

http://tutorials.jenkov.com/svg/svg-icons.html

I am doing as follows, but the icon is appearing outside of Circle.

<body>
<div class="Container_4_Button">
                <div class="SVGButton">
                    <svg viewBox="0 0 1002 120"><!--preserveAspectRatio="none"-->
                          <circle id="Menu1" cx="60" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="60" y="90">escrita</text>

                          <circle id="Menu2" cx="182" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="182" y="90">escrita</text>

                          <circle id="Menu3" cx="304" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="304" y="90">escrita</text>

                          <circle id="Menu4" cx="426" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="426" y="90">escrita</text>

                          <circle id="Menu5" cx="548" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="548" y="90">escrita</text>

                          <circle id="Menu6" cx="670" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="670" y="90">escrita</text>

                          <path   id="Menu7" d="M792,10Q745.75,9.1 742,60Q745.75,110.9 792,110Q857,110 922,110Q968.25,110.9 972,60Q968.25,9.1 922,10Q857,10 792,10"/>


                    </svg>
                </div>
            </div>
</body>

what I’m doing wrong ?

1 answer

Browser other questions tagged html css svg

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-25T17:24:41+00:00

Guy has several mistakes there, first you should not use the Tad <img> So in SVG, after you don’t use Fontawesome the way you did. You need to use the classes from the source itself. Here is a documentation with what would be a more correct approach for them https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols And a Obs is that you have to use the version .js FW and not the version .css

But in the "gambiarra" to make some adjustments... you will need to adjust the X/Y of each text that will have the FW class, because the .js creates a viewbox that you will not be able to manipulate right... This was the solution I arrived, but there must be a better way to it I believe.

I did just the first two, the rest you do to get the hang of it and better understand how to adjust.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

<div class="Container_4_Button">
    <div class="SVGButton">
        <svg viewBox="0 0 1002 120">
            <!--preserveAspectRatio="none"-->

            <defs>
                <style>
                    circle {
                        fill: black;
                    }
                    text {
                        fill: aqua;
                    }
                    g {
                        color: red;
                    }
                    g path {
                        transform:scale(0.5);
                    }
                </style>
            </defs>

            <circle id="Menu1" cx="60" cy="60" r="50" />

            <circle id="Menu2" cx="182" cy="60" r="50" />

            <circle id="Menu3" cx="304" cy="60" r="50" />

            <circle id="Menu4" cx="426" cy="60" r="50" />

            <circle id="Menu5" cx="548" cy="60" r="50" />

            <circle id="Menu6" cx="670" cy="60" r="50" />

            <path id="Menu7" d="M792,10Q745.75,9.1 742,60Q745.75,110.9 792,110Q857,110 922,110Q968.25,110.9 972,60Q968.25,9.1 922,10Q857,10 792,10" />

            <g>
                <text text-anchor="middle" id="txt1" x="-415" y="30" class="fas fa-address-book"></text>
                <text text-anchor="" id="txt2" x="-295" y="30" class="fab fa-accessible-icon"></text>
                <text text-anchor="middle" id="txt3" x="304" y="90">escrita</text>
                <text text-anchor="middle" id="txt4" x="426" y="90">escrita</text>
                <text text-anchor="middle" id="txt5" x="548" y="90">escrita</text>
                <text text-anchor="middle" id="txt6" x="670" y="90">escrita</text>
            </g>

        </svg>
    </div>
</div>