封装字体图标库

时间 2019-11-17

标签封装字体图标栏目软件设计繁體版

原文原文链接

参考了如下博客:css

https://blog.csdn.net/Doulvme/article/details/54290450web

https://blog.csdn.net/qq_25479327/article/details/77167585chrome

https://blog.csdn.net/muzidigbig/article/details/80371341markdown

查找图标并下载

1.打开阿里的矢量字体图标库(http://iconfont.cn/collections)并登录.svg

2.搜寻须要的图标加入购物车.字体

3.点击购物车选择-->下载代码.ui

4.解压编码

详细介绍

真正有用的是红色选中的,剩余的是使用的演示.url

图标使用

1.经过类名方式使用图标:spa

首先打开iconfont.css,其中红色标记的地方时能够修改的,若是移动了文件,写上正确的url路径.

其中类名icon是给图标添加样式的,本身能够改

2.经过svg标签方式

<script src="iconfont.js"></script>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-15tianwuliyoutuihuo"></use>
</svg>

第一种方式咱们修改了iconfont.css中的类名也不会影响svg的使用,由于第二种方式是不使用类名的,因此不会影响.

第二种方式咱们须要引入iconfont.js文件.而后经过修改#icon- 后面的值得到图标.图标的名称和unicode咱们能够在.svg后缀的文件夹中查看.

3.经过使用unicode编码方式

须要写入font-face:

    <style type="text/css">
        @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        } .iconfont {
/*iconfont与@font-face中的font-family的字体名称保持一致*/
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }
    </style>

</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>

<i class="icon iconfont"></i>

<div class="code">&#xe606;</div> </li>