iconfont-阿里图标库在layui中的使用
Posted 时光-ing
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iconfont-阿里图标库在layui中的使用相关的知识,希望对你有一定的参考价值。
iconfont-阿里图标库的使用简介参照:https://blog.csdn.net/blbyu/article/details/119936019
样品图展示:
部分源码展示:
<div class="layui-fluid" >
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-row layui-col-space15">
<div class="layui-bg-white" style="padding: 20px;">
<div class="layui-row layui-col-space5">
<div class="layui-card-header" style="color: #FF5722; font-size: 20px;font-weight: 700;">快捷方式</div>
<div class="layui-col-md2">
<div class="grid-demo grid-demo-bg1">
<a href="{:url('user/index')}">
<div class="layui-card-body">
<svg t="1628541190385" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="978" width="60" height="30" align="center"><path d="M716.8 0c169.664 0 307.2 137.536 307.2 307.2v409.6c0 169.664-137.536 307.2-307.2 307.2H307.2C137.536 1024 0 886.464 0 716.8V307.2C0 137.536 137.536 0 307.2 0h409.6zM504.3456 192.3328c-86.08 0-155.8528 90.0224-155.8528 201.088 0 68.864 60.3008 151.0272 67.7632 165.9264 7.4496 14.912 5.632 37.6576-0.256 44.544-8.8576 10.368-41.088 20.736-41.088 20.736l-119.0016 55.5008c-27.8144 10.432-49.5744 37.888-49.5744 68.8384v14.6688c0 33.792 26.2144 54.4768 58.4448 54.4768h480.6016c32.256 0 58.4832-20.6848 58.4832-54.4768v-14.6688c-0.0256-30.9248-21.8496-59.2256-49.6384-69.6704l-132.0064-53.8368s-25.1776-10.2144-34.9568-20.288c-6.2976-6.4896-5.8368-21.7344-0.2944-41.1904 5.5552-19.456 73.216-98.6368 73.216-170.5472 0-111.0784-69.76-201.1008-155.84-201.1008z" fill="#1677FF" p-id="979"></path></svg>
<br>
<cite style="text-align: center;">快捷图标</cite>
</div>
</a>
</div>
</div>
<div class="layui-col-md2">
<div class="grid-demo">
<a href="{:url('user/index')}">
<div class="layui-card-body">
<svg t="1628543464924" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2509" width="60" height="30" align="center"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m-1.3056 243.3792a135.4496 135.4496 0 1 1-135.4496 135.4752v-0.3072a135.3216 135.3216 0 0 1 135.4496-135.168zM178.432 702.7968v-36.8384a169.3184 169.3184 0 0 1 132.6592-165.1456 106.5472 106.5472 0 0 1 34.8672-205.7728 112.1024 112.1024 0 0 1 30.336 3.456 154.9568 154.9568 0 0 0-22.4256 80.3072 155.7248 155.7248 0 0 0 49.5872 114.0992 105.088 105.088 0 0 1-19.9936 9.3184 108.3136 108.3136 0 0 0-32.7168 17.92 248.0896 248.0896 0 0 0-91.3152 182.656z m549.6064 75.776h-435.2V731.648a216.0128 216.0128 0 0 1 176.4864-211.6096l40.3456 38.272-49.3056 137.856 46.8736 46.8736 45.5168-44.1088-43.0848-140.6464 38.912-38.8864a216.1152 216.1152 0 0 1 179.456 212.2496z m125.056-75.7504h-93.056a247.808 247.808 0 0 0-117.76-201.6256c0.3328 0 1.024-0.384 1.3824-0.384a90.9568 90.9568 0 0 1-23.04-12.3904 156.4928 156.4928 0 0 0 44.8512-109.568 154.368 154.368 0 0 0-20.352-77.2096 106.496 106.496 0 0 1 75.4688 199.168h-0.1792a169.6256 169.6256 0 0 1 132.6848 165.1456z" fill="#F46B6B" p-id="2510"></path></svg>
<br>
<cite style="text-align: center;">快捷图标</cite>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
以上是关于iconfont-阿里图标库在layui中的使用的主要内容,如果未能解决你的问题,请参考以下文章