Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    216
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to solve Icons fonts with my images

    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;

    How to see icon images in the correct way?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    icons is not a standard/websafe fontface so therefore you have to specify it first:

    Code:
    @font-face { font-family: icons; src: url(url_to_font_file); }
    insert the line at the top of your style-sheet

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    216
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Will every browser detect font-family: icons; and its path to my own icons or I need all icon fonts uploaded in the specific format like ❍ IcoMoon - Icon Fonts Done Right

    I have many icons. Should I put separate font-family for each icon? Can you post solution in this case? Should I remove background-image: url("..(images/iphone_16x16.png"); ...


    Thank you.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Have you hidden in a cave for the last few years? Because @font-face is nothing new anymore and has been the method to embed custom web fonts for quite some time now, and is widely supported. You upload your custom fonts to your server, define them in your stylesheet with @font-face, and (provided you’ve done it the bulletproof way) every browser will display that custom font wherever you use it on your site.

    Now, with icon fonts you are on the right track with IcoMoon already. But you put all the icons you are going to use (and only those, not more) into one font, using the IcoMoon app, and use the hex codes provided to add them to your elements.


  •  

    Posting Permissions

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