矢量图标字体自定义li编号样式
2016-12-07 16:54
330 查看
li的编号样子实在太少太难看了，如果用list-style-image的方式，当屏幕尺寸变化的时候，图片尺寸不会改变。目前最好的方案还是用矢量图标字体。
原理很简单，一看代码就明白了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f085"; /* 图标编码 */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* 和li的padding-left一致 */
width: 1.3em; /* 和li的padding-left一 */
}
</style>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li>床前明月光</li>
<li>疑是地上霜</li>
<li>举头望明月</li>
<li>低头思故乡</li>
</ul>
</body>
</html>
效果如下：
原理很简单，一看代码就明白了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f085"; /* 图标编码 */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* 和li的padding-left一致 */
width: 1.3em; /* 和li的padding-left一 */
}
</style>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li>床前明月光</li>
<li>疑是地上霜</li>
<li>举头望明月</li>
<li>低头思故乡</li>
</ul>
</body>
</html>
效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
- 【转载】WPF自定义控件与样式(1)-矢量字体图标(iconfont)
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
- 制作自定义图标字体，html引用web svg矢量字体
- 用CSS自定义博客链接字体及链接下划线的样式
- Android：自定义PopupMenu的样式（显示图标/设置RadioButton图标）
- Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标
- 设置树的打开关闭图标以及字体的大小颜色样式
- 字体图标样式
- OL3矢量图层样式自定义
- Dripicons – 精美的扁平风格的免费矢量图标字体
- 使用网络字体作为矢量图标
- 用CSS自定义博客链接字体及链接下划线的样式
- android:修改PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色
- 关于自定义tabbar修改字体颜色及图标选中颜色等方法的总结
- 自定义NumberPicker，更改字体颜色、分割线样式
- ul ol li的序号编号样式
- OL3矢量图层样式自定义
- Android自定义ActionBar背景色、字体颜色等样式style
- webstorm中如何自定义字体样式