字体图标的引用和自定义样式

字体图标下载

  • 字体图标引用.

    1. 在上方网站选择好自己需要的图标后进行下载
      l5d7qi0t.png
    2. 在项目中进行导入通常会选择自己新建一个css文件进行引入图标库
      l5d7rx2y.png
    3. 挑选相应图标并获取类名,应用于项目页面
      l5d7usus.png
  • 自定义字体图标样式

    1. 给图标添加一个自定义类名
      l5d7wfuf.png
    2. 在自定义的css文件内进行设置样式,因为是字体图标 样式和设置字体没什么区别
      l5d7ysvv.png

看下效果:
l5d7zyrk.png

附上代码:

  1. <!--HTML部分代码-->
  2. <body>
  3. <div>
  4. <span class="iconfont icon-icon-test huiyuan"></span>
  5. <span class="iconfont icon-icon-test1 huiyuan"></span>
  6. <span class="iconfont icon-icon-test2 huiyuan"></span>
  7. <span class="iconfont icon-icon-test3 huiyuan"></span>
  8. </div>
  9. </body>
  1. /*css部分代码*/
  2. /*引入图标库*/
  3. @import url(../font_icon/iconfont.css);
  4. /*设置图标自定义样式*/
  5. .huiyuan{
  6. font-size: 50px;
  7. color: aqua;
  8. }

媒体查询介绍以及使用

媒体查询@media :使用media可以查询媒体元素的宽高并且可以根据宽高作为限定条件更改某一个元素的值
使用到的属性:max-width min-width
max-width:设置一个最大宽度
min-width:设置一个最小宽度

  • 例如:@media (min-width:1200px){....} 语句的意思是指设置一个最小宽度为1200px当页面宽度大于1200px后会执行{…}更改某一个元素的属性或者操作
    l5d991ix.png
  • 下面是以1200 980 680为边界做的一个简易自适应
  1. <!--HTML部分代码-->
  2. <div class="box">
  3. <div class="item1"></div>
  4. <div class="item2"></div>
  5. <div class="item3"></div>
  6. </div>
  1. /*CSS部分代码*/
  2. /*设置根目录字号大小*/
  3. html{
  4. font-size: 10px;
  5. }
  6. /*设置box盒子为flex布局*/
  7. .box{
  8. display: flex;
  9. }
  10. /*定义三个盒子的默认样式*/
  11. .item1{
  12. width: 14rem;
  13. height: 5rem;
  14. margin: auto;
  15. background-color: aqua;
  16. }
  17. .item2{
  18. width: 24rem;
  19. height: 10rem;
  20. margin: auto;
  21. background-color: aquamarine;
  22. }
  23. .item3{
  24. width: 34rem;
  25. height: 15rem;
  26. margin: auto;
  27. background-color: blue;
  28. }
  29. /*媒体查询 media */
  30. /*
  31. 使用到的属性:max-width min-width
  32. max-width:设置一个最大宽度
  33. min-width:设置一个最小宽度
  34. */
  35. /*当页面宽度大于等于1200px时将html根元素字号设置为16px*/
  36. @media (min-width:1200px){
  37. html{
  38. font-size: 16px;
  39. }
  40. }
  41. /*当页面处于980px和1199px中间的时候将html根元素字号设置为14px*/
  42. @media (max-width:1199px) and (min-width:980px){
  43. html{
  44. font-size: 15px;
  45. }
  46. }
  47. /*限定最大宽度为480px 当页面宽度小于480px时将会更改html根字号大小为13px*/
  48. @media (max-width:680px)
  49. {
  50. html{
  51. font-size: 13px;
  52. }
  53. }

更多相关文章

  1. Android(安卓)8.0 新特性及开发指南
  2. 提示服务Notification在Android中的应用
  3. 阿里字体图标使用写法与响应式代码
  4. 【Android】如何更换icon和icon不变的问题
  5. 2011.09.13(3)——— android 添加快捷方式并且图标上添加数字
  6. Android(安卓)ActionBar
  7. 2011.09.13(2)——— android 图标上面添加数字
  8. 2011.09.13(2)——— android 图标上面添加数字
  9. Android菜单详解(三)——SubMenu和IconMenu

随机推荐

  1. jQuery:添加事件监听器是否覆盖相同事件
  2. JavaScript表单验证和正则表达式
  3. 不断更改页面(例如cookie点击器中的cps)
  4. 非常简单的js双向绑定框架(一)
  5. HTML Select字段通过ajax调用Web服务
  6. jQuery - 获取具有特定类的已选中复选框
  7. NodeJS - 解析JSON(只有字符串或数字)
  8. Javascript等待函数的结束,包括node.js的
  9. 如何从json对象获取匹配元素的索引?
  10. JavaScript循环输入创建一个对象数组