实际演示字体图标的使用

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一. css外部字体图标

阿里巴巴星矢图标库:https://www.iconfont.cn/
阿里巴巴星矢图标库

第一步，打开网页注册登录，搜索需要的图标

第二步，添加图标至项目组，没有项目，新建一个即可

第三步，其他的不常用，点击常用的”font class”，然后查看代码，复制css代码到项目中

二，导入图标和演示1. 把复制来的代码导入
  1.     <!-- 导入图标的CSS样式 -->
  2.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3957897_2c9wh09g5ps.css"
2. 示例
  1. <!-- 注意：一定要加iconfont 否则图标显示不出来 -->
  2. <span class="iconfont icon-kefu"></span>
  1.       .icon-kefu {
  2.         /* 给图标添加100px的字体大小 */
  3.         font-size: 100px;
  4.         /* 给图标加个颜色 */
  5.         color: lightgreen;
  6.       }

PS：需要注意的是，添加字体图标的时候 一定要加iconfont类名 这是自定义字体名称 否则图标显示不出来三. 媒体查询 演示

定义一个字体大小，方便后面演示能看出效果，1rem=16px像素

  1.         /*html代码*/
  2.     <button>登录</button>
  4.         /*CSS代码*/
  5.         /* 设置button的默认字体为1rem = 16px */
  6.       button {
  7.         font-size: 1rem;
  8.       }

  1.       /* 当页面宽度小于等于375像素 设置html页面的字体大小为14px */
  2.       @media (max-width: 375px) {
  3.         html {
  4.           font-size: 14px;
  5.         }
  6.       }
  1. 当页面宽度小于等于375像素 设置html页面的字体大小为14px

  1.       /* 当页面宽度小于等于375px 并且 宽度大于等于415px的时候 设置页面字体大小为16px */
  2.       @media (min-width: 375px) and (max-width: 415px) {
  3.         html {
  4.           font-size: 18px;
  5.         }
  6.       }
  1. 当页面宽度小于等于375px 并且 宽度大于等于415px的时候 设置页面字体大小为16px

  1.       /* 当页面宽度小于等于415像素 设置html页面的字体大小为14px */
  2.       @media (min-width: 415px) {
  3.         html {
  4.           font-size: 20px;
  5.         }
  6.       }
  1. 当页面宽度小于等于415像素 设置html页面的字体大小为14px

ps:需要注意的是，小于等于某一个值，就是不大于他
max-width=最大宽度=xxx px，
min-width=最小宽度=xxx px，
别搞混这两个即可

【感谢龙石为本站提供api网关 http://www.longshidata.com/pages/apigateway.html】
更多阅读