竹客令

Font Awesome图标应用简单实例教程

Font Awesome图标应用简单实例教程应上一篇文章Font Awesome 4.5图标一款风靡全球的图标字体库和CSS框架里面说的这篇文章就讲讲Font Awesome图标的实际运用起来会是怎么样子的我懂的也不多有说的不好的地方多多包涵！好了废话不多说我们开始吧！最后我会把这这词教程的文件放到文章最后面提供下载你们可以去看看！

我这一次是在本地测试首先我们去下载我们的Font Awesome图标的文件百度云下载地址：http://pan.baidu.com/s/1c2g9EH6

下载好了解压了会是这样的：

里面的所以东西的所以然我也说不出不过重要的就是css和那个fonts 就这两个 css不用解释了吧！fonts这个里面放的是一些字体什么什么的反正它们是必须的就对了剩下的那些是协议什么的不太清楚反正不要也是可以的

好了所以最终就是这样的：

那个index.html是我刚才新建的

好了现在我们来调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

本来我是想这截图的后来一想还不如直接发代码的好上面就是一个简单的html 有头部 head 有主体body 然后我们调用了 css文件夹里面的连个css 文件font-awesome.min.css和font-awesome.min.css 好了接下来就是从css里面调用出来我们的Font Awesome图标了我们来调用一个妹子图标 female 就是妹子图标的代码不懂的可以去上篇文章里面去找Font Awesome 4.5图标一款风靡全球的图标字体库和CSS框架里面有Font Awesome所有图标的样子和代码好了知道了调用什么图标了然后我们就开始写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i class="fa fa-female"></i>
</body>
</html>

好了我们来看我们的浏览器里面显示的是什么：

看一个妹子出现了好了是不是太小了一点我们来弄大一点

不过在这之前我们来解释一下这段代码

<i class="fa fa-female"></i>

开始我们说了妹子图标是

female

然而我们这里写的是

fa fa-female

这没有什么好奇怪的别人css里面就是这样写的fa-female 不过前面为什么要加一个fa 我就不知道了

反正就是在你调用一个图标的时候你知道了它的一个代码就在前面加一个fa fa-然后再写咋i标签的class里面就可以了

好了这就是简单的一个Font Awesome图标的调用现在我们来把妹子变大吧！

看是不是大了很多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i class="fa fa-female"></i>
<i class="fa fa-female fa-lg"></i>
<i class="fa fa-female fa-2x"></i>
<i class="fa fa-female fa-3x"></i>
<i class="fa fa-female fa-4x"></i>
<i class="fa fa-female fa-5x"></i>
</body>
</html>

我们来看看代码其实没有什么改变就是多了一个fa-lg 和fa-2x到5x 我刚才测试了最多就是5x 所以最大就是那么大了如果还有什么其它变大的方法除外 fa-lg是放大30% fa-2x到5x 这个是单位吧我也不太清楚反正就是放大的东西

其实我们可以更改很多东西的用style控制可以就可以更改：（比如说最简单的颜色）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i style="color:#ffb5b5" class="fa fa-female"></i>
<i style="color:#ff9696" class="fa fa-female fa-2x"></i>
<i style="color:#ff6b6b" class="fa fa-female fa-3x"></i>
<i style="color:#fe3b3b" class="fa fa-female fa-4x"></i>
<i style="color:#ff0e0e" class="fa fa-female fa-5x"></i>
</body>
</html>

就这样就可以了好了今天就说到这里简单教程简单的实例呵呵！

它有很多标签是可以弄的不过今天就不说了你们可以去它的官网去看看！

今天教程的原文件百度云下载：http://pan.baidu.com/s/1byEx7g

Font Awesome 4.5图标一款风靡全球的图标字体库和CSS框架

一个字库，605个图标

好字库，一个就够了。Font Awesome字库包含了与网页相关的所有形象图标。

完全不依赖JavaScript

Font Awesome完全不依赖JavaScript，因此无需担心兼容性。

缩放自如

可根据需示任意缩放，矢量图形都会为你呈现出完美的图标。

好东西真不要钱

Font Awesome完全免费，哪怕是商业用途。请查看许可。

用CSS也能炫酷

只要CSS支持，无论颜色、大小、阴影或者其它任何效果都可以轻松实现。

不同终端完美呈现

Font Awesome的矢量图标，可以在电脑、手机、平板等设备上完美呈现。

完美兼容其它框架

尽管Font Awesome是为Bootstrap而生的，但Font Awesome同样能与其它框架完美兼容。

可用于桌面系统

用于桌面系统，或需要一套完整的矢量图，请查看备忘。

可适配于屏幕阅读器

与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。

开头我就抄的别人的话了因为我自己也打不出那么多毕竟人家是官方嘛！所以我也不啰嗦了下面就是最新Font Awesome4.5 版本的图标的分类和它们的名称！然后现在肯定有人问了这个怎么用呢？其实我刚开始接触也是不知道不过现在我大致知道是怎么回事了下篇文章我会来简单的讲解和实例操作一下！

adjust

anchor

打败爱情的，从来不是距离

最强悍的第三者，永远都不是别人，而是命运

是我们都

以为我们为彼此付出了足够多

以为我们都相互爱着对方

以为只要你幸福就好

以为你会来找我

以为我们的爱情会固若金汤

最终却会以时间来收尾

不管是陪伴还是相爱还是分离都经不起时间的碾压

我们轻视时间以为可以的

去忘却去相爱去得到

愿你结婚是因为爱情

愿他对你的承诺都一一实现

更多精彩日记！

wordpress4.5已经发布了赶快来下载试试吧！

在今天wordpress4.5 已经发布了由于工作原因天天在电脑别上然后看看博客什么的正好看到了就更新了

其实wordpress4.5 早就在内侧的了，今天终于发布有几个很不错的功能

在编辑文章的时候我们总是会有用到插入url 然后以前我们插入url的时候都会弹出来一个大框感觉比较麻烦还有就是你想选择某篇文章的链接的时候要找或者是搜索也比较麻烦而现在你不需要那么麻烦了看图

当你选择你想要有链接的文章的时候点击url图标就会出现这个东西然后我是在里面打了一个搜索然后就出来了带有搜索的一些页面

这里就是我直接打了一个链接

然后这个就是我最喜欢的一个功能真的很不错不过让我不爽的就是我我刚才测试了这样设置的链接是不会在新窗口打开的这让我很不爽

然后wordpress4.5 在图片的编辑也有多了一些功能这个我就没有去测试了你们可以去试试

然后还是有一个也是文章编辑的一个功能在word里面也有的那就是当你在一个空行哪里输入三“-”再按回车的时候就会变成这样

这个还不错挺好用的

好了说了怎么多相信你们也应该看懂了

wordpress4.5百度云下载：http://pan.baidu.com/s/1dF16r53

div+CSS+JS+UL=图片加文字无缝对接图片滚动

昨天还是前天发了一个marquee标签无缝滚动但是这个优缺点那就在下面不好加文字进行一个滚动然后老板果然不满意需要一个文字在图片下面所以就有了今天这个

其实这个有很多各种叫法什么图片滚动 js自动轮播图片轮播图片自动轮播什么什么的好多个叫法所以看文字名字这个叫法不错吧！

废话不多说：（有点不好看原谅我审美比较差）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<style type="text/css">
<!--
#S_LIST{
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 0px;
 LIST-STYLE-POSITION: outside;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 LIST-STYLE-TYPE: none;
 overflow: hidden;
}

#S_LIST LI {
 width:755px;
 height:auto;
 float:left;
 padding: 0px;
 margin: 0px;
 list-style-image: none;
 list-style-type: none;
}
#S_LIST A {
 DISPLAY: block;
 MARGIN: 0px;
 WIDTH: 755px;
 HEIGHT: auto;
 TEXT-ALIGN: center;
 padding-top: 3px;
 padding-right: 0px;
 padding-bottom: 3px;
 padding-left: 0px;
}
#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 100%;
 height:240px;
}
#demo img {
border: 1px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
 float: left;
}
#demo2 {
float: left;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
    <ul id="S_LIST">    
      <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/68.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
      <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/67.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/66.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/65.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/64.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/68.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/63.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/64.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/62.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/60.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

2016年刚出来的网络新词 , 笑喷了 !

上了贼船，就跟贼走。

女大十八变，越变越随便。

走自己的路，和爱情兵分两路。

是狼就炼好牙，是羊就炼好腿。

传销就是兔子专吃窝边草。

都说姐漂亮，其实都是妆出来的。

小鸟虽小，可它玩的却是整个天空。

曾经的海枯石烂，抵不过好聚好散。

宁可去碰壁，也不要在家里面壁。

没有不变的承诺，只有说不完的谎言。

别扯那么远，谁保证你能活到那一天。

累吗？累就对了，舒服是留给死人的。

古时一剑闯荡天下，如今一贱放荡世界。

谁对我的感情能像对人民币那样坚定啊。

自从买了保险，过马路都不用看红绿灯了。

一觉醒来我以为我长高了，原来是被子盖横了。

我们始终都在练习微笑，终于变成不敢哭的人。

我不介意你骗我，我介意的是你的谎话骗不了我。

你说你会等我回来，你是等了，还找了一个人一起等。

结婚证和卫生许可证的唯一区别是，它不挂在墙上。

在你头上拉屎的未必是敌人，也可能是你楼上的邻居。

活着浪费空气，死了浪费土地，半死不活浪费人民币。

牛肉面里没牛肉不要抱怨，老婆饼里面不也没有老婆嘛。

不经历星期一上午的崩溃，就不知道星期五下午的可贵。

小学生是一队一队，中学生是一堆一堆，大学生是一对一对。

自从人晒黑了，脸色好看了，牙齿变白了，喝酒都不脸红了。

人生就像迷宫，我们用上半生找寻入口，用下半生找寻出口。

如果你爱上了别人请别告诉我，我没有你想象的那么勇敢。

坏人做一件好事叫回头是岸，好人做一件坏事叫临天亮尿床。

结婚就是 " 明知山有虎，偏向虎山行 "，可是‘不入虎穴，焉得虎子’。

最快变成哲学家的是老公，最快变成经济学家的是老婆，最快变成战略家的是丈母娘

marquee标签无缝滚动

没有什么废话可说的了只是今天用到了记下来罢了！

直接上代码：

<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="1370px"><SPAN unselectable="on"></SPAN></MARQUEE>
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:1370px;margin:0 auto;" onmouseover="aa()" onmouseout="b()" >
<a href="http://zklhy.com" target="_Blank"><img alt="我的图片描述" title="我是图片标题" src="http://www.zklhy.com/wp-content/uploads/2016/04/52.jpg"></a>
</div>
<script language="javascript" type="text/javascript">
<!--
	function scroll(obj) {
		var tmp = (obj.scrollLeft)++;
		//当滚动条到达右边顶端时
		if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
		//当滚动条滚动了初始内容的宽度时滚动条回到最左端
		if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
	}
	var a =	setInterval("scroll(document.getElementById('scrollobj'))",20);
	function aa(){
		clearInterval(a);
	}
	function b(){
		a=setInterval("scroll(document.getElementById('scrollobj'))",10);
	}
//-->
</script>

direction表示滚动的方向，值可以是left，right，up，down，默认为left
◎ behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
◎ loop表示循环的次数，值是正整数，默认为无限循环
◎ scrollamount表示运动速度，值是正整数，默认为6
◎ scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
◎ align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
◎ bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
◎ height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度
◎ hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
◎ onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

去掉HTML Img标签下的间距空白？img标签的间隙

今天在用img标签是时候突然发现的我问题然后没解决就去百度找了找发现很多方法都难以解决最后黄天不负有心人

最后让我找到了align标签下面的是align标签的值和描述：

AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。
AbsMiddle 图像的中间与同一行中最大元素的中间对齐。
Baseline 图像的下边缘与第一行文本的下边缘对齐。
Bottom 图像的下边缘与第一行文本的下边缘对齐。
Left 图像沿网页的左边缘对齐，文字在图像右边换行。
Middle 图像的中间与第一行文本的下边缘对齐。
NotSet 未设定对齐方式。
Right 图像沿网页的右边缘对齐，文字在图像左边换行。
TextTop 图像的上边缘与同一行上最高文本的上边缘对齐。
Top 图像的上边缘与同一行上最高元素的上边缘对齐。

你们可以一一去试试现在我就不做什么演示了下面是代码：

<img src="http://www.zklhy.com/wp-content/uploads/2016/04/140.jpg" align="absmiddle" />

<div style="margin:0;padding:0;border:1px solid blue;">间隙何在</div>

wordpress建设支持中文用户名的简单方法

不解释收起来这次突然需要用了才想起来还好我以前用过知道这个东西的存在不然那就不好搞了哈哈！开头纯属搞笑

直接上东西吧这东西直接加在主题functions.php文件里面就好了下面是代码：

function ludou_sanitize_user ($username, $raw_username, $strict) {
  $username = wp_strip_all_tags( $raw_username );
  $username = remove_accents( $username );
  // Kill octets
  $username = preg_replace( '|%([a-fA-F0-9][a-fA-F0-9])|', '', $username );
  $username = preg_replace( '/&.+?;/', '', $username ); // Kill entities

  // 网上很多教程都是直接将$strict赋值false，
  // 这样会绕过字符串检查，留下隐患
  if ($strict) {
    $username = preg_replace ('|[^a-z\p{Han}0-9 _.\-@]|iu', '', $username);
  }

  $username = trim( $username );
  // Consolidate contiguous whitespace
  $username = preg_replace( '|\s+|', ' ', $username );

  return $username;
}

add_filter ('sanitize_user', 'ludou_sanitize_user', 10, 3);

表格标签 table标签上下左右对齐

table标签对于网站来说还是经常用的一个标签然而有时候就会遇到不上不下非要填充东西他才会动所以很不爽加上 valign="top" 就可以顶部对齐不过这个是适用于单个<td>标签而除了可以顶部对齐以外还有还可以加一个

align="left" 或者这些valign="bottom" align="right" 都是可以的 然后我刚才上班休闲了一下 做了一个简单的演示可以看下：

然后源码是这样的：

<table width="445" height="283" border="1" bordercolor="#FF0000">
  <tr>
    <td valign="top" align="left"width="90" height="58">我是左上</td>
    <td valign="top" align="right"width="94" height="58">我是右上</td>
  </tr>
  <tr>
    <td valign="bottom" align="left"width="90" height="50">我是左下</td>
    <td valign="bottom" align="right"width="94" height="50">我是右下</td>
  </tr>
</table>

Font Awesome图标应用简单实例教程

Font Awesome 4.5图标一款风靡全球的图标字体库和CSS框架

一个字库，605个图标

完全不依赖JavaScript

缩放自如

好东西真不要钱

用CSS也能炫酷

不同终端完美呈现

完美兼容其它框架

可用于桌面系统

可适配于屏幕阅读器

4.5.0版新增20个全新的图标

网页常用图标

手形图标

交通运输图标

性别图标

文件类型图标

可旋转图标

表单图标

支付图标

图表图标

货币图标

文本编辑图标

指示方向图标

视频播放图标

著名商标图标

医疗图标