locked
How to debug a Font Awesome icon with zero width in browser? RRS feed

  • Question

  • User416875641 posted

    Hi,

    I  have small box within a cloumn on a page that has an icon applied to it, but the icon does not show, in F12 the size is seen as zero.

    This happens with all icons i try to use, maybe just the width is zeroed.

    I tried ticking off the styles in chrome, changes just about everything else but not the the icon.

    The wdth property is always zero.

    Both icons in the example do not show up.

    Only one icon seems to be showing up in the footer,   "fa fa-arrow-circle-right". Nothing else seems to be working.

    Maybe limted by the size of the footer, but for the icon in the box inner nothing is showing up either.

    <div class="col-lg-3 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-red">
    <div class="inner">
    <p>Count of Examples</p>
    <h3>@Model.ExampleCount</h3>
    <div class="icon">
    <i class="ion ion-person-add"></i>
    </div>
    </div>
    <a href="javascript:new Module.Company.ExampleDialog().loadNewAndOpenDialog()"
    class="small-box-footer">Add <i class="add-button"></i></a>
    </div>
    </div><!-- ./col -->
    </div><!-- /.row --

    Wednesday, November 27, 2019 12:16 PM

Answers

  • User288213138 posted

    Hi AltFire,

    <div class="icon">
    <i class="ion ion-person-add"></i>
    </div>

    The Ionic icons are not working, at all,

    Are you sure this class applies to the version you gave? I tested the following class, it works fine.

    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
    <i class="icon ion-md-heart"></i>

    You can try to make the icon size larger than 0 through F12 to see if the icon will appear.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 2, 2019 9:39 AM

All replies

  • User-474980206 posted

    in FA the icons are font characters. the class "fa" sets the element to display:block, and to the FA font. the actual icon class, like "fa-arrow-circle-right" use the css :before {content:} to set the font character. if you look in the browser debug tools, you can see if the CSS was overridden.  select the element, and look at the styles applied. the font should be the FA font, and if you click on ::before, the content should be a character in the font.

    Wednesday, November 27, 2019 4:21 PM
  • User288213138 posted

    Hi AltFire,

    <i class="ion ion-person-add"></i>

    Can you tell me what kind of font awesome are you using? After searching, I found that there are many different cdns with the "ion-person-add" class, so please post your cdn.

    And if you want to change the width of Font Awesome Icons, you can try below code.

    The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.

    .ion { transform: scale(1.5,1); }

    Best regards,

    Sam

    Thursday, November 28, 2019 2:50 AM
  • User416875641 posted

    Hi,

    The Ionic icons are not working, at all, the FA icons are working. I have to change the class to :

    <div class="fa">

    Changing the div class around,

    <div class="icon">
    <i class="ion-wineglass"></i>

    Nothing shows up.

    <div class="fa">
    <i class="ion-wineglass"></i> 

    Makes box bigger, and icon is present but width is zero.

    So I am thinking that the

    <div class="icon">

    is wrong,, tried :

    <div class="ion">

    and

    <div class="ionicons">

    All no icon present or even zero width icon

    I have 6 Ionic files:

    In Content.

    ionicons.css  // Ionicons, v2.0.0 Created by Ben Sperry for the Ionic Framework,

    ionicons.min.css

    In Fonts.

    ionicons.eot //cannot open in Visual Studio

    ionicons.svg

    ionicons.ttf

    ionicons.woff

    Adding to the section content header like below does nothing:

    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

    Thursday, November 28, 2019 11:02 AM
  • User-474980206 posted

    Did you try reading the documentation? You appear to be using the web components class names, but using the font.css version instead. Also there is no “wineglass” icon. It’s “wine” and the for the css you must include the style whether you want logo, iOS or material design. Try

    <i class=“icon ion-ios-wine”></i>

    note: the docs recommend not using the font, but the web component and svg’s instead.

    Thursday, November 28, 2019 8:53 PM
  • User416875641 posted

    <i class=“icon ion-ios-wine”></i>

    Doesn't work.

    Only have framework documentation.

    My code has reference to Wineglass. Probably the packages are out of date, and no longer supported.

    Ionicons, v2.0.0
    Created by Ben Sperry for the Ionic Framework,

    .ion-wineglass:before { content: "\f2b9"; }

    .ion-woman:before { content: "\f25d"; }

    .ion-wrench:before { content: "\f2ba"; }

    .ion-xbox:before { content: "\f30c" }

    Friday, November 29, 2019 9:45 AM
  • User288213138 posted

    Hi AltFire,

    <div class="icon">
    <i class="ion ion-person-add"></i>
    </div>

    The Ionic icons are not working, at all,

    Are you sure this class applies to the version you gave? I tested the following class, it works fine.

    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
    <i class="icon ion-md-heart"></i>

    You can try to make the icon size larger than 0 through F12 to see if the icon will appear.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 2, 2019 9:39 AM