Link to home
Start Free TrialLog in
Avatar of smitty62
smitty62Flag for United States of America

asked on

css icomoons will not display on page

When I start type class="  in dreamweaver the list comes up and I choose from the list, but I just cannot get the darn thing to display in the browser page.  Here is the code:

<ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#highlights" aria-controls="highlights" role="tab" data-toggle="tab"><i class="icomoon-spotlight"></i> Highlights</a></li>
                    <li role="presentation"><a href="#news" aria-controls="news" role="tab" data-toggle="tab"><i class="icomoon-calendar-5"></i> News</a></li>
                    <li role="presentation"><a href="#calendar" aria-controls="calendar" role="tab" data-toggle="tab"><i class="icomoon-calendar-5"></i> Links</a></li>
                </ul>

Open in new window


The css file is correct otherwise it wouldn't have displayed on the popup listing, but it just will not display in the browser page.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Can you explain a bit - feel like we are missing the first 5 chapters of the book.

What is not displaying - what are you expecting and what are you getting?
  1. Go to https://icomoon.io/app/#/select
  2. Select the icons that you want to use
  3. Click generate font to download
  4. Look at Demo.html on how to use it
Avatar of smitty62

ASKER

Here is a link to the page which is having the problem.  Please scroll down to the tabs.  You will notice a blank square where the icon should be.  Since the square is there it shows that the css file is being found, however, the path to the icon file is not being found even though I put in the complete path in the iepa.css file.  It's probably something simple that I'm overlooking, but why can't the css file find the icon file?

http://insuranceqa.illinois.gov/epa/index.html
I have been to the icomoon website.  No help there.  It still will not work.  The css file isn't working with the font file.  I thought at first that is was the path to the font file, but that is not the case.  I even tried using the full path, but the css file isn't able to reference the font file.  I checked the MIME Types on the server to make sure that .eot .woff. .svg, and .ttf files were listed there and they are.  Any idea why the css file reference such as .icomoon-spotlight:before{content:"\e2e6"}  would not be able to reference the font file.

http://insuranceqa.illinois.gov/epa/index.html
Any reason that you want to use icomoon specifically? Can another library work?
Can you show us where in your source you are including the link to the font file.

I did a source search for icomoon on the source and only found class references ...
The css file is located at http://insuranceqa.illinois.gov/home/epa/css/iepa.css  The font files are located at http://insuranceqa.illinois.gov/home/epa/css/fonts/*.*  I put the full path name in the css file so that it could find the fonts, but that didn't work either.  The usual reference is fonts/icomoons.eot.  If you go to the default page you can see the little squares where the icons should show up which means it's referencing the css file okay, but the css file cannot see the font files even with the full path name.

http://insuranceqa.illinois.gov/epa/
The only font file reference I can find is here
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Roboto+Slab:300,400" rel="stylesheet" type="text/css">

Open in new window

The iepa.css link goes nowhere - probably meant view-source:http://insuranceqa.illinois.gov/epa/css/iepa.css - which also does not have any font references in.

Can you help out here and point to where in your code you are loading the icomoons font?
I just wanted you to know the location of the css file which is why I sent the link.  If you do a search within the iepa.css file you will see the references to the font file.  Go to the css file and do a save page as.  Then do a search for "http://" and you will find the references.  The font images are referenced by number.
Honestly, I would just use Font Awesome or Glyphicons.
Perhaps that would be better.  Can you suggest some links?
ASKER CERTIFIED SOLUTION
Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you.
It is free so don't worry about the license messages, that is for different edition