smitty62
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:
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.
<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>
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.
- Go to https://icomoon.io/app/#/select
- Select the icons that you want to use
- Click generate font to download
- Look at Demo.html on how to use it
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
http://insuranceqa.illinois.gov/epa/index.html
ASKER
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
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 ...
I did a source search for icomoon on the source and only found class references ...
ASKER
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/
http://insuranceqa.illinois.gov/epa/
The only font file reference I can find is here
Can you help out here and point to where in your code you are loading the icomoons font?
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Roboto+Slab:300,400" rel="stylesheet" type="text/css">
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?
ASKER
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.
ASKER
Perhaps that would be better. Can you suggest some links?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you.
It is free so don't worry about the license messages, that is for different edition
What is not displaying - what are you expecting and what are you getting?