zoukankan      html  css  js  c++  java
  • html 中使用 iconfont、fontAwesome

    在HTML中尽量使用iconfont 替代图片有很多好处,而且方便,可以设置大小、颜色 等 可以用于字体的设置。

    一、使用iconfont

    1、打开iconfont 官网 iconfont.cn。

    2、将自己需要的图标添加到购物车。

    3、选好之后,在购物车有一个添加项目。随便建一个项目,然后添加。

    4、之后在我的项目 里 会有 下载到本地。

    5、下载完之后解压。里面有 3 个 HTML文件,打开 里面有 使用教程(3 中引入方式)。

    一般取出 .ttf/.css/.woff/.svg/.eot 这几个文件 然后放入一个文件夹,在 要使用的地方 引入 .css 文件,然后 

    1   <!-- 引入样式文件 -->
    2   <link rel="stylesheet" href="./css1/myicon/iconfont.css">
    3 
    4   <!-- 使用 -->
    5   <i class="iconfont icon-setting"></i>

    页面中就可以看到图标了。

    二、使用fontAwesome

    下载资源,解压之后取出css 文件夹 和 fonts 文件夹 放在一个文件夹中,然后放入项目。

    使用时:

    引入 css 文件夹下的 .css 文件

    1   <!-- 引入样式文件 -->
    2   <link rel="stylesheet" href="./fonts/FontAwesome/font-awesome.css">
    3 
    4    <!-- 使用 -->
    5    <i class="fa fa-car"></i>

    很简单的使用,以后可以解放大部分通用小图标了。

  • 相关阅读:
    类与对象
    《大道至简》第三章读后感
    动手动脑及课后作业
    课程作业一
    第三周学习进度条
    软件工程个人作业02
    第二周学习进度条
    软件工程个人作业01(2)
    软件工程个人作业01
    登录界面
  • 原文地址:https://www.cnblogs.com/xguoz/p/10172476.html
Copyright © 2011-2022 走看看