Trouble using icon fonts with CSS

2019-02-05 01:24发布

站内问答 / HTML/CSS
1175 1 6

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. Though I have investigated a number of tutorials and videos, I have been unable to successfully make use of icon fonts despite many hours of effort.

To start, I went to a site that offers a large number of icon fonts, chose the ones I liked, generated them and finally downloaded them into a folder. But now that these icon fonts are in a folder, what should I do?

1条回答
ゆ 、 Hurt°
2楼-- · 2019-02-05 02:07

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)