Adding FontAwesome in code

Hello, I am trying to add Font Awesome icons in coding. I am using HTML and CSS

  • 430
  • More
Replies (11)
    • To use font awesome icons as CSS content code follow the below steps.

      1. Add a unique CSS class name to the icon element you want to use.
      2. Set the font-family to “Font Awesome 5 Free” (For regular,solid icons) or “Font Awesome 5 Pro” (If you buy a pro license) or “Font Awesome 5 Brands” (For brand icons)
      3. Set the font-weight css property as 900 (For Solid), 400 (Regular or Brands), 300 (Light for pro icons).
      4. Set the content css property to the unicode value font awesome icon.
      5. And if required,add a common CSS class name for all icon elements, for example “font-awesome-icons” (This is to add your own CSS to the icons).

      https://www.angularjswiki.com/fontawesome/csscontentcode/

      • <div class='container'>

         <h1>Welcome Back!</h1>

         <h2>Choose An Activity</h2>

         <button class='one'><a href="https://www.sermome.com/page/persons-home" target="_self">Find new <b><FontAwesomeIcon icon="fa-solid fa-users-medical" /></b></a></button>

          <button class='two'><a href="https://sermome.com/page/products-home" target="_self"><b>Now</b></a></button>

         <button class='three'><a href="https://www.sermome.com/page/sounds-home" target="_self"><b>Here</b></a></button>

         <button class='four'><b>Enter Some </b></a></button>

         <button class='five'><a href="https://www.sermome.com/page/Choose-Video"><b>Watch Now 》</b></a></button>

        </div>

        <style>

         @charset "UTF-8";

        @import url(https://fonts.googleapis.com/css?family=Oswald:400,700);

        @import url(https://fonts.googleapis.com/css?family=Nunito:400,700);

        :root {

         background: -webkit-linear-gradient(top, #222838 0%, #131621 100%);

         height: 100vh;

        }

        .container {

         width: 334px;

         margin: 0 auto;

         position: absolute;

         top: 50%;

         left: 0;

         text-align: center;

         right: 0;

         transform: translateY(-50%);

        }

        a {

         color: white;

         text-decoration: none;

        }

        h1, h2 {

         color: white;

         font-family: "Oswald", sans-serif;

         font-weight: normal;

        }

        h2 {

         font-size: 14px;

         margin-bottom: 30px;

         color: #24E2B8;

        }

        .five, .four, .three, .two, .one {

         border: none;

         border-radius: 4px;

         text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.48);

         overflow: hidden;

         padding: 20px 50px 20px 70px;

         margin-bottom: 20px;

         font-size: 20px;

         position: relative;

         color: white;

         outline: none;

         cursor: pointer;

         width: 100%;

         transition: background-position 0.7s, box-shadow 0.4s;

         background-size: 110%;

         font-family: "Oswald", sans-serif;

        }

        .five:hover, .four:hover, .three:hover, .two:hover, .one:hover {

         background-position: 0% 30%;

        }

        .five:hover:after, .four:hover:after, .three:hover:after, .two:hover:after, .one:hover:after {

         right: -40px;

         transition: right 0.4s, transform 30s 0.2s linear;

        }

        .five:before, .four:before, .three:before, .two:before, .one:before, .five:after, .four:after, .three:after, .two:after, .one:after {

         font-family: FontAwesome6Free;

         display: block;

         position: absolute;

        }

        .five:before, .four:before, .three:before, .two:before, .one:before {

         transition: all 1s;

         font-size: 30px;

         left: 25px;

         top: 19px;

        }

        .five:after, .four:after, .three:after, .two:after, .one:after {

         transition: right 0.4s, transform 0.2s;

         font-size: 100px;

         opacity: 0.3;

         right: -120px;

         top: -17px;

        }

        .one {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 10px 0px #782CDA;

         background-image: linear-gradient(to bottom, #782CDA, rgba(126, 94, 162, 0.51)), url("http://nightlifeassociates.com/wp-content/uploads/2014/03/hakkasan-nightclub_tiesto-smalls.jpg");

        }

        .one:hover {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px #782CDA;

        }

        .one:hover:after {

         transform: scale(1);

        }

        .one:hover:before {

         transform: scale(1.2);

        }

        .one:after, .one:before {

         content: "Friends";

        }

        .one b {

         color: ;

         font-weight: 700;

        }

        .two {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 10px 0px ;

         background-image: linear-gradient(to bottom, , rgba(222, 135, 61, 0.24)), url("https://sermome.com/page/view-photo?id=7");

        }

        .two:hover {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px ;

        }

        .two:hover:after {

         transform: scale(1);

        }

        .two:hover:before {

         transform: scale(1.2);

        }

        .two:after, .two:before {

         content: "Shopping";

        }

        .two b {

         color: ;

         font-weight: 700;

        }

        .three {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 10px 0px #36C176;

         background-image: linear-gradient(to bottom, #36C176, rgba(86, 202, 139, 0.18)), url("http://blog.teamthinklabs.com/wp-content/uploads/2012/09/codepen-460x253.png");

        }

        .three:hover {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px #36C176;

        }

        .three:hover:after {

         transform: scale(1);

        }

        .three:hover:before {

         transform: scale(1.2);

        }

        .three:after, .three:before {

         content: "Listen";

        }

        .three b {

         color: #63FFAC;

         font-weight: 700;

        }

        .four {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 10px 0px #33E7EA;

         background-image: linear-gradient(to bottom, #33E7EA, rgba(161, 245, 245, 0.24)), url("https://cdn2.itpro.co.uk/sites/itpro/files/server_room.jpg");

        }

        .four:hover {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px #33E7EA;

        }

        .four:hover:after {

         transform: rotate(3000deg);

        }

        .four:hover:before {

         transform: rotate(360deg);

        }

        .four:after, .four:before {

          content: "Contests";

        }

        .four b {

         color: #1CF4FF;

         font-weight: 700;

        }

        .five {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 10px 0px ;

         background-image: linear-gradient(to bottom, , rgba(154, 40, 87, 0.24)), url("");

        }

        .five:hover {

         box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 30px 0px ;

        }

        .five:hover:after {

         transform: scale(1);

        }

        .five:hover:before {

         transform: scale(1.2);

        }

        .five:after, .five:before {

         content: "Videos";

        }

        .five b {

         color: ;

         font-weight: 700;

        }

        </style>

        • This is the code I am working on. I need to add Font Awesome icons in Content. The original code did not work when I transferred it to a custom block and the font awesome icons left a missing image block where i presume its not supported in UNA

          • Hello @Will Roberts !

            Plz specify the way how do you transfer original code to the custom block. Also, do you have the Font awesome app installed?

            • Here is the original code. I have font awesome downloaded but I dont know how to add the icons https://codepen.io/jcoulterdesign/pen/GoYqOj

              • Any update on this?

                • Please review the processor, as this is not just HTML and CSS, for this example you would need to make sure your server can handle the conversion for the following...

                  Haml - https://haml.info

                  SCSS - https://sass-lang.com

                  image_transcoder.php?o=sys_images_editor&h=204&dpx=1&t=1647034684

                  The libraries would then need to be imported into the UNA project.

                  • I am on UNA Cloud so I don't have access to the server but probably would need help from UNA side. I'm sure the directory is downloaded so maybe someone on UNA could help me

                    • Did you figure this out? I’d like to know how to add icons elsewhere on the site

                      • Didn't find out so I used images instead

                        • That worked! Thank you :-)

                          Login or Join to comment.