零基础学做网站培训介绍

当前位置:

自己做网站怎么使用字体图标(font-awesome图标使用方法)

我们做网站时,网站上会有很多的小图标。以前我们会用小图片来制作这些小图标,但这样做有一个缺点:当我们放大页面时,小图片就会出现失真不清楚的问题。

小图片图标:
学做网站论坛使用的小图标

字体图标:
zt

如何解决这样的问题呢?就是使用字体图标来代替小图片图标。下面就是建网站常用的字体图标-font-awesome图标为例,介绍一下如何在自己做网站时使用字体图标。

方法/步骤

  1. 第一步需要在自己的网页中引入font-awesome字体图标文件。方法很简单,只需要将下面的代码粘贴到自己网站头部HTML文件的</head>标签上方即可。(如果不懂HTML,请学习一下html视频教程
    
    
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  2. 在需要显示小图标的位置,使用下面的代码格式进行字体图标的调用。
    
    
    <i class="fa fa-home fa-lg"></i>
  3. 上面只是一个小图标的使用举例代码,不同的字体图标的代码不一样的。详细见:什么是字体图标,怎么用?
  4. 这样,我们在自己建网站时,就可以使用字体图标了,不管再怎么放大,图标都不会变形。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 自己做的模板阁网站 图文教程 (15280 次浏览)
    这是我学习了论坛课程后自己做的一个模板阁网站,这款自己做网站的主题个人DIY成纯主题下载站,可以通过填加自定义字段demo、down、thumbnails来分别
  • 感谢VIP学员:湖南鸿风 的无私分享,此模板已通过学做网站论坛的审核,大家可放心使用。该模板学做网站论坛修改了如下几点:1、header.php代码没
  • APMServ5.2.6本地环境配置软件介绍由于每台电脑的端口使用情况不一样,很多学员在用XAMPP环境配置软件配制本地环境的时候,经常会不成功,出现服务器或
  • SEO软件安装及使用方法 图文教程附件下载 (114889 次浏览)
    SEO软件安装及使用方法第一步:下载软件,下载地址:https://pan.baidu.com/share/link?shareid=482816&uk=404547014第二步:下载后,会得
  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • 由于WP开始自动调用谷哥字体,会导致自己做网站时打开后台很慢,我们只需要屏蔽谷歌字体。在之前我们讲到使用代码方式屏蔽谷歌字体,现在学做网站论坛
  • 网站favicon图标如何制作 图文教程 (112081 次浏览)
    在我们上网的时候,看到有许多网站,当打开它的时候,在浏览器中会出现它们网站的图标,特别的个性化。很多学做网站的学员也问过这样的问题,询问网站f
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。