发表新帖
发表新帖

Trouble using icon fonts with CSS

后端 未结
关注
1 1734
栀梦
栀梦 2020-12-30 11:16

I am new to web design and development and have been playing around with different styling techniques. During the course of my research, I came across icon fonts

相关标签:
1条回答
  • 别那么骄傲
    2020-12-30 11:53

    Here is a step by step guide:

    Go to Font Squirrel and download the @font-face kit. Unzip it, rename it to 'fonts', and put it in the same directory as your html file.

    Use this as your html file:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    @font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    li {
      list-style-type: none;
    }
    [data-icon]:before {
      font-family: 'ModernPictogramsNormal';
      content: attr(data-icon);
      speak: none;
      padding:0 5px;
    }
    </style>
</head>
<body>
  <ul>
    <li data-icon="^">RSS</li>
    <li data-icon="*">Star</li>
    <li data-icon=".">Shopping Cart</li>
  </ul>
</body>
</html>

    You should see this:

    Icon Font Example

    You're rolling!

    In addition, to know what character to use, check out the Character Map on the Font Squirrel site.

    0 讨论(0)
 看不清?
提交回复
热议问题