iconfont-阿里图标库在layui中的使用

Posted 2021-09-12 时光-ing

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>