CSS\HTML - How to add Ionicons to CSS "content" property?

Question

I'm using a custom switch toggle (from here) and I want to add an icon instead of regular text. When I paste the Ionicons code to the CSS content property it appears as a rectangle (some indication for the fact the character\font was not found). How do I get pass this?

EDIT: I forgot to add, I have included the CSS from CDN.

JSfiddle

Switch CSS:

.onoffswitch {
    position: relative; 
    width: 108px;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    border: 2px solid #999999; 
    border-radius: 30px;
}
.onoffswitch-inner {
    display: block; 
    width: 200%; 
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; 
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; 
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; 
    float: left; width: 50%; 
    height: 40px; padding: 0; 
    line-height: 38px;
    font-size: 14px; 
    color: white; 
    font-weight: bold;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #FFFFFF; 
    color: #BABABA;
}
.onoffswitch-inner:after {
    content: "\f425"; /* <--------THE ICON GOES HERE */
    padding-right: 10px;
    background-color: #8035A7; 
    color: #FFFFFF;
    text-align: right;
}
.onoffswitch-switch {
    display: block; 
    width: 41px; margin: -1.5px;
    background: #FFFFFF;
    border: 2px solid #999999; 
    border-radius: 50px;
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 66px;
    -moz-transition: all 0.3s ease-in 0s; 
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; 
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

HTML:

    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
        <label class="onoffswitch-label" for="myonoffswitch">
            <p id="impressions_meter_text">Impressions meter</p>
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>

Norean

looking at the source code of node_modules\ionicons\dist\scss sadly it appears the developers did a real bad work here and used zero SCSS functions and mixins to allow what you ask to do – Capper

Answer 1

You're missing a @font-face declaration that imports the "Ionicons" font face, plus the .onoffswitch-inner:after declaration doesn't specify the font-family: "Ionicons";.

I've extracted the Ionicons font declaration from their css and added it to a forked jsFiddle.

Baryta

Answer 2

You ommit the font-family property .. when you use a code from a font icon into CSS content property you must do it like this :

.custom-icon:after {
    content: "\f425";
    font-family: "the name of the font icon you are using";
}

And that's it :P

Telega

That's the worst thing to do. this will break if some icon will be removed and the corresponding unicode value will be different. – Capper

Answer 3

Using Ionic V2

to use ionicons from : https://ionicframework.com/docs/v2/ionicons/ in your css, you just need to do like that.

.yourclass {
        font-family: "Ionicons";
        content: "\f3d1";
}

this will print: <ion-icon name="arrow-forward"></ion-icon>

you can find the content hexadecimal in:

node_modules/ionic-angular/css/ionic.css:

node_modules/ionic-angular/css/ionic.dark.css

Brunel

Answer 4

You need to import ion icon css files to load the icon font. Please, read the doc at https://github.com/driftyco/ionicons

1. Download and extract the font pack
2. Copy the ionicons.css to your project
3. Copy the fonts folder to your project
4. Ensure the font urls within ionicons.css properly reference the fonts path within your project.
5. Include a reference to the ionicons.css file from every webpage you need to use it.

Then, instead of put "content" directly, you could use the classes that framework provide us, as:

<i class="icon ion-home"></i>

Heyward

That wasn't the question. – Nasturtium

You are wrong Adam, if you don't import the css font you never could load the icon, so in the example that user provide us the icon font not exist. – Heyward

The OP didn't ask how to use an i tag - the OP asked how come the font wasn't displaying when the character was included in a content rule - which was because 1) The font wasn't included (as stated in your post) and 2) because the OP didn't declare the font-family – Nasturtium