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>

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 — vsync, Jul 22 '18 at 15:40

score 20 · Accepted Answer · edited Feb 23 '18 at 00:24

20

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.

edited Feb 23 '18 at 00:24

mhpreiman

139
2
4
13

answered May 03 '15 at 09:48

ckuijjer

13,293
3
40
45

score 7 · Answer 2 · answered May 03 '15 at 11:00

7

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

answered May 03 '15 at 11:00

Skecci Dev

121
4

That's the worst thing to do. this will break if some icon will be removed and the corresponding *unicode* value will be different. – vsync Jul 22 '18 at 15:34

score 6 · Answer 3 · answered Jan 17 '17 at 12:20

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

score 3 · Answer 4 · answered May 03 '15 at 09:43

3

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

Download and extract the font pack
Copy the ionicons.css to your project
Copy the fonts folder to your project
Ensure the font urls within ionicons.css properly reference the fonts path within your project.
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>

answered May 03 '15 at 09:43

Jose Mato

2,709
1
17
18

2

That wasn't the question. – Adam Jenkins May 03 '15 at 09:46
1

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. – Jose Mato May 03 '15 at 10:06
2

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` – Adam Jenkins May 03 '15 at 13:06

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

4 Answers4