求助大神，css中用字体标签画icon图标的问题

html-css015

求助大神，css中用字体标签画icon图标的问题,第1张

CSS中用字体标签画icon图标方法：

1、先引入字体标签字体；

2、在相关标签内使用（例：如下）。

<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <span class="fa fa-phone"></span>

可以在阿里图库中下载相应的图标，下到本地后

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont'

src: url('iconfont.eot')

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg')

}

第二步：定义使用iconfont的样式

.iconfont{

font-family:"iconfont" !important

font-size:16pxfont-style:normal

-webkit-font-smoothing: antialiased

-webkit-text-stroke-width: 0.2px

-moz-osx-font-smoothing: grayscale}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33</i>

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。

首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：

.showImage{

background-image: url(9pic2.jpg)

width: 100px

height: 100px

}

然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。

扩展资料

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。

CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。