www.webdeveloper.com
Results 1 to 7 of 7

Thread: Icon fonts with my own images

  1. #1
    Join Date
    Sep 2005
    Posts
    1,634

    Icon fonts with my own images

    I have set code but icons are not seen. Why is this?
    PHP Code:

    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    meta charset="utf-8">
    <
    meta name="viewport" content="width=device-width, initial-scale=1">
    <
    link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <
    link rel="stylesheet" href="css/styles1.css" type="text/css" />
    <
    script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    </head>
    <body>
    <div data-role="page">

    <br /><br /><br /><br /><br />
    <div class="row-of-icons">
    <a class="icon-alone" href="#Email"><span data-icon="phone" aria-hidden="true"></span><!--<span>E-mail</span>--></a>
    <a class="icon-alone" href="#Phone"><span data-icon="email" aria-hidden="true"></span><!--<span>Phone</span>--></a>
    </div>


    </div>
    </body>
    </html>

    CSS:
    .ui-icon-phone:after {
    background-image: url("..(images/iphone_16x16.png");
    background-size: 18px 18px;
    }
    .ui-icon-mail:after {
    background-image: url("..(images/mail_16x16.png");
    background-size: 18px 18px;
    }
    [data-icon]:before {
    font-family: icons;
    content: attr(data-icon);
    speak: none;
    }
    .icon-alone {
    display: inline-block;
    }
    .icon-block {
    display: block;
    }
    .ui-body-c .ui-link, .ui-body-c .ui-link:hover {
    color: #00FF00;
    text-decoration: none;
    font-size: 2.5em;


  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    946
    I could be wrong but I'm pretty sure this line isn't valid CSS:
    Code:
    background-image: url("..(images/iphone_16x16.png");
    It's a little hard to tell you exactly what it should be given I have no idea where these images are on your server (or in relation to the page they are on). But it's possible the intended code would be:
    Code:
    background-image: url("../images/iphone_16x16.png");
    And please note there are 2 lines like this in your CSS. Both (all) should be corrected.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Sep 2005
    Posts
    1,634
    It is just sample to see Icons fonts sample.
    Validation:
    This document was successfully checked as HTML5!

    PHP Code:

    <!DOCTYPE html>
    <
    html>
    <
    head>


    <
    meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <
    meta charset="UTF-8" />
    <
    title></title>
    <
    link href="css/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <
    link rel="stylesheet" href="css/styles5.css" type="text/css" />
    <
    script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
    </head>
    <body>
    <div data-role="page">

    <div class="row-of-icons">
    <a class="icon-alone" href="#Email"><span data-icon="phone" aria-hidden="true"></span><!--<span>E-mail</span>--></a>
    <a class="icon-alone" href="#Phone"><span data-icon="email" aria-hidden="true"></span><!--<span>Phone</span>--></a>
    </div>


    </div>
    </body>
    </html> 
    PHP Code:

    .ui-icon-phone:after {
    background-imageurl("../images/iphone_16x16.png");
    background-size18px 18px;
    }
    .
    ui-icon-mail:after {
    background-imageurl("../images/mail_16x16.png");
    background-size18px 18px;
    }
    .
    icon-alone {
     
    displayinline-block;
    }
    .
    icon-block {
     
    displayblock;
    }
    .
    ui-body-.ui-link, .ui-body-.ui-link:hover  {
     
    color#00FF00;
     
    text-decorationnone;
     
    font-size2.5em;


  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    946
    I'm a bit unclear on your last post... what's the status of your problem, resolved or no?

    Your HTML was fine... it was just those 2 lines of CSS that I noticed were invalid (and seemed to be corrected now). If it's still not working then my guess is it depends on where those images are stored. You can actually debug the CSS itself to see if the images are being linked correctly.

    If your right-click the icon's <span> tag in your browser and select 'Inspect Element' you can view the CSS associated with it in your browser's developer console. Here you should see the background-image property as well as the url it's linking to. You can click the URL to see if it is properly linked to an actual image or not.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Sep 2005
    Posts
    1,634
    It is not an issue with HTML. I like to know how to connect
    data-icon="phone'' with iphone_16x16.png as it is not working. Do you have some sample?

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    946
    At no point have I claimed you had an issue with your HTML...

    Moving on, I'm not sure why I missed it before but your CSS doesn't seem to match the elements in your HTML in regard to the images. You are references two classes (ui-icon-phone and ui-icon-mail) which don't actually exist, thus those background images are not being applied to anything. Aside from that, if you were to add those classes to elements on your page you should set the actual width and height and would still need to set a display of block or inline-block as well as set an empty content string in order to get background images working on a :before or :after selector. For example:
    Code:
    .ui-icon-phone:after {
      background-image: url("../images/iphone_16x16.png");
      width: 18px;
      height: 18px;
      content: '';
      display: inline-block;
    }
    .ui-icon-mail:after {
      background-image: url("../images/mail_16x16.png");
      width: 18px;
      height: 18px;
      content: '';
      display: inline-block;
    }
    However, if I assume you want to do it a different way, without updating the classes used in your HTML, then you would have to change your CSS selectors to look something like this:
    Code:
    span[data-icon="iphone"] {
      background-image: url("../images/iphone_16x16.png");
      width: 18px;
      height: 18px;
      content: '';
      display: inline-block;
    }
    span[data-icon="mail"] {
      background-image: url("../images/mail_16x16.png");
      width: 18px;
      height: 18px;
      content: '';
      display: inline-block;
    }
    You can also append the :after class to those selectors, but it isn't necessary.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Two things you need to check:

    1. There may be problem with the link that you have used for image URL
    background-image: url("../images/iphone_16x16.png");

    You need to check this line of your code and also the style sheet Link you have included in which page you are using the style sheet.

    2. The second thing is that where you have saved the icons. Are you using the correct path for that or not.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles