博客
关于我
css基础08-字体图标
阅读量:222 次
发布时间:2019-03-01

本文共 1902 字,大约阅读时间需要 6 分钟。

越学心里越没底,毕竟知识的增长伴随着问题的增长,所以我应该感到幸运,我学到东西了!

可以像使用字体一样,使用图标;轻量性,灵活性,兼容性。

矢量,支持所有现代浏览器,低版本IE浏览器;智能渲染单色和CSS3的渐变色;版权上有限制,创作字体图标费时间。@font-face(有固定格式代码)。
www.iconfont.cn 阿里巴巴字体图标库 (需要登录)
https://icomoon.io/app/#/select 字体图标在线生成

下面是最后生成的压缩包解压后,文件夹里面的内容,其中有用的有fontsstyle.css,这两个拷贝到项目文件夹里面就可以了!

最后生成的文件夹内容

/*下面是css文件里面的代码,这部分是固定的格式*/@font-face {     font-family: 'icomoon';     /*这个可以更改*/  src:  url('../fonts/icomoon.eot?g2i2pg');  src:  url('../fonts/icomoon.eot?g2i2pg#iefix') format('embedded-opentype'),    url('../fonts/icomoon.ttf?g2i2pg') format('truetype'),    url('../fonts/icomoon.woff?g2i2pg') format('woff'),    url('../fonts/icomoon.svg?g2i2pg#icomoon') format('svg');  font-weight: normal;  font-style: normal;  font-display: block;}
/*这部分不太重要!只有font-family比较重要!*/[class^="icon-"], [class*=" icon-"] {     /* use !important to prevent issues with browser extensions that change fonts */  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;}
/*这个是字体的编码*/.icon-all:before {     content: "\e900";}.icon-auto:before {     content: "\e901";}.icon-bold:before {     content: "\e902";}.icon-bussiness-man:before {     content: "\e903";}.icon-dollar:before {     content: "\e904";}.icon-inspection:before {     content: "\e905";}.icon-integral:before {     content: "\e906";}.icon-language:before {     content: "\e907";}.icon-left-button:before {     content: "\e908";}.icon-loading:before {     content: "\e909";}.icon-message-center:before {     content: "\e90a";}
/*定义样式的时候!*/      span{               font-size: 10rem;            color: #e74c3c;            text-shadow: 0 0 1rem gainsboro;        }        span:last-child{               font-size: 5rem;            color: #449fdb;        }

转载地址:http://vgjv.baihongyu.com/

你可能感兴趣的文章
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>