美文网首页
自定义字体与字体图标

自定义字体与字体图标

作者: 英俊又可爱XD | 来源:发表于2018-01-23 17:54 被阅读0次

自定义字体

四种格式:都需要,用来兼容不同类型的浏览器

  • eot,svg,ttf,woff
  • 移动端用 *.ttf 就可以了
导入
@font-face {
font-family: 'iconfont';
src: url('*.eot'); /* IE9*/
src: url('*.eot?#iefix') format('embedded-opentype'), /* 给IE6-IE8用 */
url('*.woff') format('woff'), /* 给chrome、firefox用 */
url('*.ttf') format('truetype'), /* 给chrome、firefox、opera、Safari, Android, iOS 4.2+ 用*/
url('*.svg#iconfont') format('svg'); /*给 iOS 4.1- 用 */ }

字体图标

  1. 拿到字体文件,放入文件夹
  2. 在HTML的<head>引入文件<link rel="stylesheet" href="css/font.css">
  3. HTML中字体图标一般用i标签
  4. 在demo页中找到所需图标的className,加在i标签上,一般由两个类名组成

14组好看又免费的字体图标

web界面设计的免费图标字体


2018.1.23
2018.1.29更新

相关文章

  • 自定义字体与字体图标

    自定义字体 四种格式:都需要,用来兼容不同类型的浏览器 eot,svg,ttf,woff 移动端用 *.ttf 就...

  • Bootstrap布局组件——字体图标

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。字体图标用于显示...

  • react native 字体图标

    1.直接使用react-native-vector-icons 2. 可以使用里面的字体图标 3.自定义字体图标,...

  • 前端记录20171220

    光标形态 cursor自定义字体 @font-face CSS3字体兼容 > 特别是一些字体图标

  • 大话 Axure | 轻松导出图标字体所有图标

    近几年图标字体使用非常广泛,它的优点是可以自定义图标颜色、大小等参数,且图标不会失真。本文将教你轻松导出图标字体中...

  • 字体图标

    9字体图标 1. 字体图标优点 2. 字体图标使用流程 总体来说,字体图标按照如下流程: 3. 设计字体图标...

  • Icon Fonts(字体图标)的探究

    what 定义:字体图标是一种自定义字体。 每个字都有对应的unicode,这个unicode渲染出来是一个图标(...

  • 手把手教你使用字体图标

    常用字体图标库 阿里字体图标库 iconfont fontawesome 字体图标库 首先使用阿里的字体图标库上个...

  • Bootstrap 布局组件

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。虽然,Glyph...

  • 小程序使用字体图标

    小程序集成字体图标库awesome与阿里iconfont,先看集成结果 字体图标集成步聚 1 将字体ttf转化为b...

网友评论

      本文标题:自定义字体与字体图标

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