Link to home
Create AccountLog in
Avatar of David Schure
David Schure

asked on

Fa Fa not showing.

The Fa Fa in the blue square (Invoice) is not showing,
<!--PRINT INVOICES-->
   <div class="col-sm-4">
   <div class="panel panel-white no-radius text-center">
   <div class="panel-body">
   <span class="fa-stack fa-2x">
   <i class="fa fa-square fa-stack-2x text-primary"></i>
    <i class="iconify" data-icon="fa-solid:file-invoice-dollar fa-stack-1x fa-inverse"></i>
    </span>
   <h2 class="StepTitle">Invoices</h2>
   <p class="links-cl-effect-1">
   <a href="">Print Therapist Invoices</a>
   </p>
   </div>
   </div>
   </div>

Open in new window

Avatar of Andrew Porter
Andrew Porter
Flag of United States of America image
Could it be behind the blue box? Also, could CSS later in the code be overwritting? Can you inspect the element w/ your browser and post a screenshot of the settings?
Avatar of David Schure
David Schure

ASKER

Here you go...

element.style {
}

styles.css:2597
.text-primary {
 /* color: #007AFF !important; */
  1.     color: #0297d7 !important;
}

font-awesome.min.css:4
.fa-stack-2x {
    font-size: 2em;
}

font-awesome.min.css:4
.fa-stack-1x, .fa-stack-2x {
    position: absolute;
  1.     left: 0;
  2.     width: 100%;
  3.     text-align: center;
}

font-awesome.min.css:4
.fa {
    display: inline-block;
  1.     font: normal normal normal 14px/1 FontAwesome;
  2.     font-size: inherit;
  3.     text-rendering: auto;
  4.     -webkit-font-smoothing: antialiased;
  5.     -moz-osx-font-smoothing: grayscale;
  6.     transform: translate(0, 0);
}

bootstrap.min.css:5
.text-primary {
    color: #337ab7;
}
bootstrap.min.css:5
* {
    -webkit-box-sizing: border-box;
  1.     -moz-box-sizing: border-box;
  2.     box-sizing: border-box;
}

user agent stylesheet
i {
    font-style: italic;
}

Inherited from span.fa-stack.fa-2x
font-awesome.min.css:4
.fa-stack {
    position: relative;
  1.     display: inline-block;
  2.     width: 2em;
  3.     height: 2em;
  4.     line-height: 2em;
  5.     vertical-align: middle;
}

font-awesome.min.css:4
.fa-2x {
    font-size: 2em;
}

Inherited from div.panel.panel-white.no-radius.text-center
styles.css:3843

ASKER CERTIFIED SOLUTION
Avatar of David Schure
David Schure
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Scott Fell
Scott Fell
Flag of United States of America image
That code does not help.

The easiest way to help you would be to provide a link to this page on your site. If this is generated dynamically, run it in the same manner as you have to create the screenshot. Then Save your rendered HTML browser as an HTML file. Finally upload the file as is to your server and provide the link for us.

The  next option would be for you to set up a test case.  I started here https://codepen.io/padas/pen/oNWoogE I have added both iconify and font-awsome but you should double check.  You will need to add the appropriate css to recreate this test case.

Otherwise, on your own, you can right click on the area and select, "Inspect". Review the console for any errors and then look in the elements tab (this is where right clicking on the element comes in handy).  You will be able to see computed styles either to the side or bottom depending on how your browser tools are set up.

It looks like you must have got that far because of the way you copy and pasted your css, but hopefully you can also see that the css you pasted does not help to recreate a test case to identify the issue.

Once you can recreate this, we can better help identify the issue.
Avatar of David Schure
David Schure

ASKER

Thank you.  I figured it out.  Working Solution above. Have a great day.