美文网首页
iconFont使用教程

iconFont使用教程

作者: A落儿 | 来源:发表于2019-03-11 22:06 被阅读0次

    在线引用图标

    1. 进入网站:Iconfont网址:http://www.iconfont.cn
    2. 点击网站上方的“官方图标库”,选择自己喜欢的图标。在这里我选择天猫的图标库。
    3. 选择好自己喜欢的图标,你可以有两个选择,下载代码 和 添加至项目。
    4. 我们这两选择添加至项目,然后新建项目,并输入名称。
    5. 项目添加好后,会自动给我们转入到我们项目库中。点击查看在线链接。
    6. 生产css引入的代码,生成后就可以在项目首页index.html引入了。
     <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">
    

    图标的使用: 图标顺利引入到项目中,已经可以使用它们了,在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴,也可以自己写代码。

    <i class="icon iconfont icon-hanbao"></i>
    这样在页面中就可以看到图标了。

    添加更多图标:

    如果在项目中觉的图标不够用了,需要添加更多图标。可以利用下面四步进行添加。

    去Iconfont网站继续挑选,把相中的图标加入购物车中。
    把购物车中的图标加入到项目中。
    重新生成在线链接。(这部很重要)
    在项目主页中(index.html),更换css引入链接。

    线下使用图标

    相关文章

      网友评论

          本文标题:iconFont使用教程

          本文链接:https://www.haomeiwen.com/subject/iyomcqtx.html