css的字体图标使用

1. 说到字体图标, 现在我所做的项目中用到很多.

比如一个路径节点图


image.png

, 每个节点都可以用字体图标来代替, 这样做能使得 颜色/图形大小等待可以更方便的调整.

2. 怎么使用字体图标呢?

2.1 首先, 你需要用ps将你需要的图标导出成svg, 然后通过这个链接https://icomoon.io/app/#/select 将那些svg引入. 生成字体图标的操作可以参照这个链接http://blog.csdn.net/u013938465/article/details/50680468 的介绍(额, 我只是代码的搬运工=. =), 很详细的呢
2.2 下面就是需要在你的项目里面设置一些东西了
2.2.1 在css文件里面需要先引入你再2.1步骤中生成的文件, 应该是四个文件,像这样的样子:
image.png

, 通过设置

@font-face{
        font-family: 'icomoon';
        src:  url('font/icomoon.eot?pylhfs');
        src:  url('font/icomoon.eot?pylhfs#iefix') format('embedded-opentype'),
        url('font/icomoon.ttf?pylhfs') format('truetype'),
        url('font/icomoon.woff?pylhfs') format('woff'),
        url('font/icomoon.svg?pylhfs#stage-font') format('svg');
        font-weight: normal;
        font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
      /* use !important to prevent issues with browser extensions that change font */
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
2.2.2 标签类名必须以 icon- 开头, 然后你就可以'为所欲为'啦. 通过给该标签添加伪元素(::before/::after), 然后通过设置伪元素样式中的content属性, 其值为你需要添加的字体图标的值. 然后通过font-size可以改变图标的大小, color改变图标的颜色......

ps: i标签是不能添加伪元素的.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,010评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,666评论 25 708
  • 虽然之前已经在写其他电影的时候顺带吐槽了一下这部电影,但最后还是没忍住,所以再完整的吐槽一次。毕竟,它让所有观众都...
    创艺人阅读 288评论 1 2
  • 小花正站在半山腰上,她看见山底下的他正在买油条和豆浆。就敞开嗓门朝他喊道,"帮我把油条带上来。"2个人在一起生活了...
    蛾子时述之阅读 174评论 0 0