java如何在文字旁边加图标_引入外部图标，文字(示例代码)

diwjkdfjdjfjdskjfkdjfjdfkjddkfjoijefkjdklfjdhfoiehoihghkwh

p{

width: 50px;

white-space: normal;/* 文字不换行 */

overflow:hidden;/* 超出的时候隐藏 */

text-overflow: ellipsis;/* 文本超出之后显示省略号 */    三条语句连用文本超出后显示省略号

font-family: "microsoft yahei";/* 字体,微软雅黑 */

}

hyyy

@font-face {

font-family:myfont;

src: url(../img/Americratika.ttf);}      引入外部字体

span{

font-family: myfont;

font-size: 20px;

}

              图标上复制代码，放在html中

@font-face {

font-family: ‘iconfont‘; /* project id 1756572 */

src: url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.eot‘);

src: url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.eot?#iefix‘) format(‘embedded-opentype‘),         阿里巴巴矢量图标库，图标加购物车后添加至项目，我的项目                                                                                                                                                           中点击Unicode，复制代码粘贴到css中

url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.woff2‘) format(‘woff2‘),

url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.woff‘) format(‘woff‘),

url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.ttf‘) format(‘truetype‘),

url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.svg#iconfont‘) format(‘svg‘);

}

#wan{

font-family: ‘iconfont‘ ;        font-family的值与复制项目中font-family的值相等

color: #00FFFF;

font-size: 30px;

}

盒模型

.hm{

background-color: #00FFFF;

border: #0000FF solid 10px;/* 边框 */

padding: 30px ;/* 内边距 */

margin: 20px dotted;/* 外边距 按照上右下左的顺序,dotted点线,dashed虚线,double双线,solid实线, */

}/* 垂直方向时,两个外边距会合并成一个 */