码迷,mamicode.com
首页 > 其他好文 > 详细

解决找图标的问题

时间:2021-05-24 07:48:28      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:demo   theme   pos   icon   tst   angular   hone   turn   lan   

技术图片

 

 

<style type="text/css"> 
<!-- 
@import url(E:/mashibin/html/TP0002/v2/demo1/node_modules/@fortawesome/fontawesome-free/css/all.css);/*这里是通过@import引用CSS的样式内容*/ 
--> 
</style> 

<style type="text/css"> 
.lcx {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 35px;
    flex: 0 0 35px;
    font-size: 1.5rem;
    cursor: pointer;
}
.div {
    display: block;
    border: 1px solid black;
    float: left;
    margin: 5px;
    padding: 5px;
}

.div2 {
    display: block;
    float: left;
    width: 100%;
}
.div3 {
    display: block;
    float: left;
    width: 100%;
    height: 50px;
}

.span2 {
    font-size: 1.5rem !important;
    font-weight: bold;
    margin: 10px;
    display: block;
}

.div4 {
    display: block;
    float: left;
    width: 50%;
    height: 50px;
    top: 0px;
    z-index: 9999;
    position: fixed;
    background: lightgrey;
    text-align: center;
}
.left0 {
    left: 0px;
}
.right0 {
    right: 0px;
}
#search {
    width: 300px;
    height: 40px;
    margin-top: 5px;
    border: none;
}
</style> 

<div class="div4 left0">search:<input id="search"></div>
<div class="div4 right0"><span class="span2 span4"></span></div>


<div class="div3"></div>
<div class="div2"><span class="span2">fontawesome-icon</span></div>

<div class="div"><i class="lcx far fa-500px "></i><i class="lcx fab fa-500px "></i><i class="lcx fas fa-500px "></i></div>
<div class="div"><i class="lcx far fa-accessible-icon "></i><i class="lcx fab fa-accessible-icon "></i><i class="lcx fas fa-accessible-icon "></i></div>
<div class="div"><i class="lcx far fa-accusoft "></i><i class="lcx fab fa-accusoft "></i><i class="lcx fas fa-accusoft "></i></div>
<div class="div"><i class="lcx far fa-acquisitions-incorporated "></i><i class="lcx fab fa-acquisitions-incorporated "></i><i class="lcx fas fa-acquisitions-incorporated "></i></div>
<div class="div"><i class="lcx far fa-ad "></i><i class="lcx fab fa-ad "></i><i class="lcx fas fa-ad "></i></div>
<div class="div"><i class="lcx far fa-address-book "></i><i class="lcx fab fa-address-book "></i><i class="lcx fas fa-address-book "></i></div>
<div class="div"><i class="lcx far fa-address-card "></i><i class="lcx fab fa-address-card "></i><i class="lcx fas fa-address-card "></i></div>
<div class="div"><i class="lcx far fa-adjust "></i><i class="lcx fab fa-adjust "></i><i class="lcx fas fa-adjust "></i></div>
<div class="div"><i class="lcx far fa-adn "></i><i class="lcx fab fa-adn "></i><i class="lcx fas fa-adn "></i></div>
<div class="div"><i class="lcx far fa-adversal "></i><i class="lcx fab fa-adversal "></i><i class="lcx fas fa-adversal "></i></div>
<div class="div"><i class="lcx far fa-affiliatetheme "></i><i class="lcx fab fa-affiliatetheme "></i><i class="lcx fas fa-affiliatetheme "></i></div>
<div class="div"><i class="lcx far fa-airbnb "></i><i class="lcx fab fa-airbnb "></i><i class="lcx fas fa-airbnb "></i></div>
<div class="div"><i class="lcx far fa-air-freshener "></i><i class="lcx fab fa-air-freshener "></i><i class="lcx fas fa-air-freshener "></i></div>
<div class="div"><i class="lcx far fa-algolia "></i><i class="lcx fab fa-algolia "></i><i class="lcx fas fa-algolia "></i></div>
<div class="div"><i class="lcx far fa-align-center "></i><i class="lcx fab fa-align-center "></i><i class="lcx fas fa-align-center "></i></div>
<div class="div"><i class="lcx far fa-align-justify "></i><i class="lcx fab fa-align-justify "></i><i class="lcx fas fa-align-justify "></i></div>
<div class="div"><i class="lcx far fa-align-left "></i><i class="lcx fab fa-align-left "></i><i class="lcx fas fa-align-left "></i></div>
<div class="div"><i class="lcx far fa-align-right "></i><i class="lcx fab fa-align-right "></i><i class="lcx fas fa-align-right "></i></div>
<div class="div"><i class="lcx far fa-alipay "></i><i class="lcx fab fa-alipay "></i><i class="lcx fas fa-alipay "></i></div>
<div class="div"><i class="lcx far fa-allergies "></i><i class="lcx fab fa-allergies "></i><i class="lcx fas fa-allergies "></i></div>
<div class="div"><i class="lcx far fa-amazon "></i><i class="lcx fab fa-amazon "></i><i class="lcx fas fa-amazon "></i></div>
<div class="div"><i class="lcx far fa-amazon-pay "></i><i class="lcx fab fa-amazon-pay "></i><i class="lcx fas fa-amazon-pay "></i></div>
<div class="div"><i class="lcx far fa-ambulance "></i><i class="lcx fab fa-ambulance "></i><i class="lcx fas fa-ambulance "></i></div>
<div class="div"><i class="lcx far fa-american-sign-language-interpreting "></i><i class="lcx fab fa-american-sign-language-interpreting "></i><i class="lcx fas fa-american-sign-language-interpreting "></i></div>
<div class="div"><i class="lcx far fa-amilia "></i><i class="lcx fab fa-amilia "></i><i class="lcx fas fa-amilia "></i></div>
<div class="div"><i class="lcx far fa-anchor "></i><i class="lcx fab fa-anchor "></i><i class="lcx fas fa-anchor "></i></div>
<div class="div"><i class="lcx far fa-android "></i><i class="lcx fab fa-android "></i><i class="lcx fas fa-android "></i></div>
<div class="div"><i class="lcx far fa-angellist "></i><i class="lcx fab fa-angellist "></i><i class="lcx fas fa-angellist "></i></div>
<div class="div"><i class="lcx far fa-angle-double-down "></i><i class="lcx fab fa-angle-double-down "></i><i class="lcx fas fa-angle-double-down "></i></div>
<div class="div"><i class="lcx far fa-angle-double-left "></i><i class="lcx fab fa-angle-double-left "></i><i class="lcx fas fa-angle-double-left "></i></div>
<div class="div"><i class="lcx far fa-angle-double-right "></i><i class="lcx fab fa-angle-double-right "></i><i class="lcx fas fa-angle-double-right "></i></div>
<div class="div"><i class="lcx far fa-angle-double-up "></i><i class="lcx fab fa-angle-double-up "></i><i class="lcx fas fa-angle-double-up "></i></div>
<div class="div"><i class="lcx far fa-angle-down "></i><i class="lcx fab fa-angle-down "></i><i class="lcx fas fa-angle-down "></i></div>
<div class="div"><i class="lcx far fa-angle-left "></i><i class="lcx fab fa-angle-left "></i><i class="lcx fas fa-angle-left "></i></div>
<div class="div"><i class="lcx far fa-angle-right "></i><i class="lcx fab fa-angle-right "></i><i class="lcx fas fa-angle-right "></i></div>
<div class="div"><i class="lcx far fa-angle-up "></i><i class="lcx fab fa-angle-up "></i><i class="lcx fas fa-angle-up "></i></div>
<div class="div"><i class="lcx far fa-angry "></i><i class="lcx fab fa-angry "></i><i class="lcx fas fa-angry "></i></div>
<div class="div"><i class="lcx far fa-angrycreative "></i><i class="lcx fab fa-angrycreative "></i><i class="lcx fas fa-angrycreative "></i></div>
<div class="div"><i class="lcx far fa-angular "></i><i class="lcx fab fa-angular "></i><i class="lcx fas fa-angular "></i></div>
<div class="div"><i class="lcx far fa-ankh "></i><i class="lcx fab fa-ankh "></i><i class="lcx fas fa-ankh "></i></div>
<div class="div"><i class="lcx far fa-apper "></i><i class="lcx fab fa-apper "></i><i class="lcx fas fa-apper "></i></div>
<div class="div"><i class="lcx far fa-apple "></i><i class="lcx fab fa-apple "></i><i class="lcx fas fa-apple "></i></div>
<div class="div"><i class="lcx far fa-apple-alt "></i><i class="lcx fab fa-apple-alt "></i><i class="lcx fas fa-apple-alt "></i></div>
<div class="div"><i class="lcx far fa-apple-pay "></i><i class="lcx fab fa-apple-pay "></i><i class="lcx fas fa-apple-pay "></i></div>
<div class="div"><i class="lcx far fa-app-store "></i><i class="lcx fab fa-app-store "></i><i class="lcx fas fa-app-store "></i></div>
<div class="div"><i class="lcx far fa-app-store-ios "></i><i class="lcx fab fa-app-store-ios "></i><i class="lcx fas fa-app-store-ios "></i></div>
<div class="div"><i class="lcx far fa-archive "></i><i class="lcx fab fa-archive "></i><i class="lcx fas fa-archive "></i></div>
<div class="div"><i class="lcx far fa-archway "></i><i class="lcx fab fa-archway "></i><i class="lcx fas fa-archway "></i></div>
<div class="div"><i class="lcx far fa-arrow-alt-circle-down "></i><i class="lcx fab fa-arrow-alt-circle-down "></i><i class="lcx fas fa-arrow-alt-circle-down "></i></div>
<div class="div"><i class="lcx far fa-arrow-alt-circle-left "></i><i class="lcx fab fa-arrow-alt-circle-left "></i><i class="lcx fas fa-arrow-alt-circle-left "></i></div>
<div class="div"><i class="lcx far fa-arrow-alt-circle-right "></i><i class="lcx fab fa-arrow-alt-circle-right "></i><i class="lcx fas fa-arrow-alt-circle-right "></i></div>
<div class="div"><i class="lcx far fa-arrow-alt-circle-up "></i><i class="lcx fab fa-arrow-alt-circle-up "></i><i class="lcx fas fa-arrow-alt-circle-up "></i></div>
<div class="div"><i class="lcx far fa-arrow-circle-down "></i><i class="lcx fab fa-arrow-circle-down "></i><i class="lcx fas fa-arrow-circle-down "></i></div>
<div class="div"><i class="lcx far fa-arrow-circle-left "></i><i class="lcx fab fa-arrow-circle-left "></i><i class="lcx fas fa-arrow-circle-left "></i></div>
<div class="div"><i class="lcx far fa-arrow-circle-right "></i><i class="lcx fab fa-arrow-circle-right "></i><i class="lcx fas fa-arrow-circle-right "></i></div>
<div class="div"><i class="lcx far fa-arrow-circle-up "></i><i class="lcx fab fa-arrow-circle-up "></i><i class="lcx fas fa-arrow-circle-up "></i></div>
<div class="div"><i class="lcx far fa-arrow-down "></i><i class="lcx fab fa-arrow-down "></i><i class="lcx fas fa-arrow-down "></i></div>
<div class="div"><i class="lcx far fa-arrow-left "></i><i class="lcx fab fa-arrow-left "></i><i class="lcx fas fa-arrow-left "></i></div>
<div class="div"><i class="lcx far fa-arrow-right "></i><i class="lcx fab fa-arrow-right "></i><i class="lcx fas fa-arrow-right "></i></div>
<div class="div"><i class="lcx far fa-arrows-alt "></i><i class="lcx fab fa-arrows-alt "></i><i class="lcx fas fa-arrows-alt "></i></div>
<div class="div"><i class="lcx far fa-arrows-alt-h "></i><i class="lcx fab fa-arrows-alt-h "></i><i class="lcx fas fa-arrows-alt-h "></i></div>
<div class="div"><i class="lcx far fa-arrows-alt-v "></i><i class="lcx fab fa-arrows-alt-v "></i><i class="lcx fas fa-arrows-alt-v "></i></div>
<div class="div"><i class="lcx far fa-arrow-up "></i><i class="lcx fab fa-arrow-up "></i><i class="lcx fas fa-arrow-up "></i></div>
<div class="div"><i class="lcx far fa-artstation "></i><i class="lcx fab fa-artstation "></i><i class="lcx fas fa-artstation "></i></div>
<div class="div"><i class="lcx far fa-assistive-listening-systems "></i><i class="lcx fab fa-assistive-listening-systems "></i><i class="lcx fas fa-assistive-listening-systems "></i></div>
<div class="div"><i class="lcx far fa-asterisk "></i><i class="lcx fab fa-asterisk "></i><i class="lcx fas fa-asterisk "></i></div>
<div class="div"><i class="lcx far fa-asymmetrik "></i><i class="lcx fab fa-asymmetrik "></i><i class="lcx fas fa-asymmetrik "></i></div>
<div class="div"><i class="lcx far fa-at "></i><i class="lcx fab fa-at "></i><i class="lcx fas fa-at "></i></div>
<div class="div"><i class="lcx far fa-atlas "></i><i class="lcx fab fa-atlas "></i><i class="lcx fas fa-atlas "></i></div>
<div class="div"><i class="lcx far fa-atlassian "></i><i class="lcx fab fa-atlassian "></i><i class="lcx fas fa-atlassian "></i></div>
<div class="div"><i class="lcx far fa-atom "></i><i class="lcx fab fa-atom "></i><i class="lcx fas fa-atom "></i></div>
<div class="div"><i class="lcx far fa-audible "></i><i class="lcx fab fa-audible "></i><i class="lcx fas fa-audible "></i></div>
<div class="div"><i class="lcx far fa-audio-description "></i><i class="lcx fab fa-audio-description "></i><i class="lcx fas fa-audio-description "></i></div>
<div class="div"><i class="lcx far fa-autoprefixer "></i><i class="lcx fab fa-autoprefixer "></i><i class="lcx fas fa-autoprefixer "></i></div>
<div class="div"><i class="lcx far fa-avianex "></i><i class="lcx fab fa-avianex "></i><i class="lcx fas fa-avianex "></i></div>
<div class="div"><i class="lcx far fa-aviato "></i><i class="lcx fab fa-aviato "></i><i class="lcx fas fa-aviato "></i></div>
<div class="div"><i class="lcx far fa-award "></i><i class="lcx fab fa-award "></i><i class="lcx fas fa-award "></i></div>
<div class="div"><i class="lcx far fa-aws "></i><i class="lcx fab fa-aws "></i><i class="lcx fas fa-aws "></i></div>
<div class="div"><i class="lcx far fa-baby "></i><i class="lcx fab fa-baby "></i><i class="lcx fas fa-baby "></i></div>
<div class="div"><i class="lcx far fa-baby-carriage "></i><i class="lcx fab fa-baby-carriage "></i><i class="lcx fas fa-baby-carriage "></i></div>
<div class="div"><i class="lcx far fa-backspace "></i><i class="lcx fab fa-backspace "></i><i class="lcx fas fa-backspace "></i></div>
<div class="div"><i class="lcx far fa-backward "></i><i class="lcx fab fa-backward "></i><i class="lcx fas fa-backward "></i></div>
<div class="div"><i class="lcx far fa-bacon "></i><i class="lcx fab fa-bacon "></i><i class="lcx fas fa-bacon "></i></div>
<div class="div"><i class="lcx far fa-bacteria "></i><i class="lcx fab fa-bacteria "></i><i class="lcx fas fa-bacteria "></i></div>
<div class="div"><i class="lcx far fa-bacterium "></i><i class="lcx fab fa-bacterium "></i><i class="lcx fas fa-bacterium "></i></div>
<div class="div"><i class="lcx far fa-bahai "></i><i class="lcx fab fa-bahai "></i><i class="lcx fas fa-bahai "></i></div>
<div class="div"><i class="lcx far fa-balance-scale "></i><i class="lcx fab fa-balance-scale "></i><i class="lcx fas fa-balance-scale "></i></div>
<div class="div"><i class="lcx far fa-balance-scale-left "></i><i class="lcx fab fa-balance-scale-left "></i><i class="lcx fas fa-balance-scale-left "></i></div>
<div class="div"><i class="lcx far fa-balance-scale-right "></i><i class="lcx fab fa-balance-scale-right "></i><i class="lcx fas fa-balance-scale-right "></i></div>
<div class="div"><i class="lcx far fa-ban "></i><i class="lcx fab fa-ban "></i><i class="lcx fas fa-ban "></i></div>
<div class="div"><i class="lcx far fa-band-aid "></i><i class="lcx fab fa-band-aid "></i><i class="lcx fas fa-band-aid "></i></div>
<div class="div"><i class="lcx far fa-bandcamp "></i><i class="lcx fab fa-bandcamp "></i><i class="lcx fas fa-bandcamp "></i></div>
<div class="div"><i class="lcx far fa-barcode "></i><i class="lcx fab fa-barcode "></i><i class="lcx fas fa-barcode "></i></div>
<div class="div"><i class="lcx far fa-bars "></i><i class="lcx fab fa-bars "></i><i class="lcx fas fa-bars "></i></div>
<div class="div"><i class="lcx far fa-baseball-ball "></i><i class="lcx fab fa-baseball-ball "></i><i class="lcx fas fa-baseball-ball "></i></div>
<div class="div"><i class="lcx far fa-basketball-ball "></i><i class="lcx fab fa-basketball-ball "></i><i class="lcx fas fa-basketball-ball "></i></div>
<div class="div"><i class="lcx far fa-bath "></i><i class="lcx fab fa-bath "></i><i class="lcx fas fa-bath "></i></div>
<div class="div"><i class="lcx far fa-battery-empty "></i><i class="lcx fab fa-battery-empty "></i><i class="lcx fas fa-battery-empty "></i></div>
<div class="div"><i class="lcx far fa-battery-full "></i><i class="lcx fab fa-battery-full "></i><i class="lcx fas fa-battery-full "></i></div>
<div class="div"><i class="lcx far fa-battery-half "></i><i class="lcx fab fa-battery-half "></i><i class="lcx fas fa-battery-half "></i></div>
<div class="div"><i class="lcx far fa-battery-quarter "></i><i class="lcx fab fa-battery-quarter "></i><i class="lcx fas fa-battery-quarter "></i></div>
<div class="div"><i class="lcx far fa-battery-three-quarters "></i><i class="lcx fab fa-battery-three-quarters "></i><i class="lcx fas fa-battery-three-quarters "></i></div>
<div class="div"><i class="lcx far fa-battle-net "></i><i class="lcx fab fa-battle-net "></i><i class="lcx fas fa-battle-net "></i></div>
<div class="div"><i class="lcx far fa-bed "></i><i class="lcx fab fa-bed "></i><i class="lcx fas fa-bed "></i></div>
<div class="div"><i class="lcx far fa-beer "></i><i class="lcx fab fa-beer "></i><i class="lcx fas fa-beer "></i></div>
<div class="div"><i class="lcx far fa-behance "></i><i class="lcx fab fa-behance "></i><i class="lcx fas fa-behance "></i></div>
<div class="div"><i class="lcx far fa-behance-square "></i><i class="lcx fab fa-behance-square "></i><i class="lcx fas fa-behance-square "></i></div>
<div class="div"><i class="lcx far fa-bell "></i><i class="lcx fab fa-bell "></i><i class="lcx fas fa-bell "></i></div>
<div class="div"><i class="lcx far fa-bell-slash "></i><i class="lcx fab fa-bell-slash "></i><i class="lcx fas fa-bell-slash "></i></div>
<div class="div"><i class="lcx far fa-bezier-curve "></i><i class="lcx fab fa-bezier-curve "></i><i class="lcx fas fa-bezier-curve "></i></div>
<div class="div"><i class="lcx far fa-bible "></i><i class="lcx fab fa-bible "></i><i class="lcx fas fa-bible "></i></div>
<div class="div"><i class="lcx far fa-bicycle "></i><i class="lcx fab fa-bicycle "></i><i class="lcx fas fa-bicycle "></i></div>
<div class="div"><i class="lcx far fa-biking "></i><i class="lcx fab fa-biking "></i><i class="lcx fas fa-biking "></i></div>
<div class="div"><i class="lcx far fa-bimobject "></i><i class="lcx fab fa-bimobject "></i><i class="lcx fas fa-bimobject "></i></div>
<div class="div"><i class="lcx far fa-binoculars "></i><i class="lcx fab fa-binoculars "></i><i class="lcx fas fa-binoculars "></i></div>
<div class="div"><i class="lcx far fa-biohazard "></i><i class="lcx fab fa-biohazard "></i><i class="lcx fas fa-biohazard "></i></div>
<div class="div"><i class="lcx far fa-birthday-cake "></i><i class="lcx fab fa-birthday-cake "></i><i class="lcx fas fa-birthday-cake "></i></div>
<div class="div"><i class="lcx far fa-bitbucket "></i><i class="lcx fab fa-bitbucket "></i><i class="lcx fas fa-bitbucket "></i></div>
<div class="div"><i class="lcx far fa-bitcoin "></i><i class="lcx fab fa-bitcoin "></i><i class="lcx fas fa-bitcoin "></i></div>
<div class="div"><i class="lcx far fa-bity "></i><i class="lcx fab fa-bity "></i><i class="lcx fas fa-bity "></i></div>
<div class="div"><i class="lcx far fa-blackberry "></i><i class="lcx fab fa-blackberry "></i><i class="lcx fas fa-blackberry "></i></div>
<div class="div"><i class="lcx far fa-black-tie "></i><i class="lcx fab fa-black-tie "></i><i class="lcx fas fa-black-tie "></i></div>
<div class="div"><i class="lcx far fa-blender "></i><i class="lcx fab fa-blender "></i><i class="lcx fas fa-blender "></i></div>
<div class="div"><i class="lcx far fa-blender-phone "></i><i class="lcx fab fa-blender-phone "></i><i class="lcx fas fa-blender-phone "></i></div>
<div class="div"><i class="lcx far fa-blind "></i><i class="lcx fab fa-blind "></i><i class="lcx fas fa-blind "></i></div>
<div class="div"><i class="lcx far fa-blog "></i><i class="lcx fab fa-blog "></i><i class="lcx fas fa-blog "></i></div>
<div class="div"><i class="lcx far fa-blogger "></i><i class="lcx fab fa-blogger "></i><i class="lcx fas fa-blogger "></i></div>
<div class="div"><i class="lcx far fa-blogger-b "></i><i class="lcx fab fa-blogger-b "></i><i class="lcx fas fa-blogger-b "></i></div>
<div class="div"><i class="lcx far fa-bluetooth "></i><i class="lcx fab fa-bluetooth "></i><i class="lcx fas fa-bluetooth "></i></div>
<div class="div"><i class="lcx far fa-bluetooth-b "></i><i class="lcx fab fa-bluetooth-b "></i><i class="lcx fas fa-bluetooth-b "></i></div>
<div class="div"><i class="lcx far fa-bold "></i><i class="lcx fab fa-bold "></i><i class="lcx fas fa-bold "></i></div>
<div class="div"><i class="lcx far fa-bolt "></i><i class="lcx fab fa-bolt "></i><i class="lcx fas fa-bolt "></i></div>
<div class="div"><i class="lcx far fa-bomb "></i><i class="lcx fab fa-bomb "></i><i class="lcx fas fa-bomb "></i></div>
<div class="div"><i class="lcx far fa-bone "></i><i class="lcx fab fa-bone "></i><i class="lcx fas fa-bone "></i></div>
<div class="div"><i class="lcx far fa-bong "></i><i class="lcx fab fa-bong "></i><i class="lcx fas fa-bong "></i></div>
<div class="div"><i class="lcx far fa-book "></i><i class="lcx fab fa-book "></i><i class="lcx fas fa-book "></i></div>
<div class="div"><i class="lcx far fa-book-dead "></i><i class="lcx fab fa-book-dead "></i><i class="lcx fas fa-book-dead "></i></div>
<div class="div"><i class="lcx far fa-bookmark "></i><i class="lcx fab fa-bookmark "></i><i class="lcx fas fa-bookmark "></i></div>
<div class="div"><i class="lcx far fa-book-medical "></i><i class="lcx fab fa-book-medical "></i><i class="lcx fas fa-book-medical "></i></div>
<div class="div"><i class="lcx far fa-book-open "></i><i class="lcx fab fa-book-open "></i><i class="lcx fas fa-book-open "></i></div>
<div class="div"><i class="lcx far fa-book-reader "></i><i class="lcx fab fa-book-reader "></i><i class="lcx fas fa-book-reader "></i></div>
<div class="div"><i class="lcx far fa-bootstrap "></i><i class="lcx fab fa-bootstrap "></i><i class="lcx fas fa-bootstrap "></i></div>
<div class="div"><i class="lcx far fa-border-all "></i><i class="lcx fab fa-border-all "></i><i class="lcx fas fa-border-all "></i></div>
<div class="div"><i class="lcx far fa-border-none "></i><i class="lcx fab fa-border-none "></i><i class="lcx fas fa-border-none "></i></div>
<div class="div"><i class="lcx far fa-border-style "></i><i class="lcx fab fa-border-style "></i><i class="lcx fas fa-border-style "></i></div>
<div class="div"><i class="lcx far fa-bowling-ball "></i><i class="lcx fab fa-bowling-ball "></i><i class="lcx fas fa-bowling-ball "></i></div>
<div class="div"><i class="lcx far fa-box "></i><i class="lcx fab fa-box "></i><i class="lcx fas fa-box "></i></div>
<div class="div"><i class="lcx far fa-boxes "></i><i class="lcx fab fa-boxes "></i><i class="lcx fas fa-boxes "></i></div>
<div class="div"><i class="lcx far fa-box-open "></i><i class="lcx fab fa-box-open "></i><i class="lcx fas fa-box-open "></i></div>
<div class="div"><i class="lcx far fa-box-tissue "></i><i class="lcx fab fa-box-tissue "></i><i class="lcx fas fa-box-tissue "></i></div>
<div class="div"><i class="lcx far fa-braille "></i><i class="lcx fab fa-braille "></i><i class="lcx fas fa-braille "></i></div>
<div class="div"><i class="lcx far fa-brain "></i><i class="lcx fab fa-brain "></i><i class="lcx fas fa-brain "></i></div>
<div class="div"><i class="lcx far fa-bread-slice "></i><i class="lcx fab fa-bread-slice "></i><i class="lcx fas fa-bread-slice "></i></div>
<div class="div"><i class="lcx far fa-briefcase "></i><i class="lcx fab fa-briefcase "></i><i class="lcx fas fa-briefcase "></i></div>
<div class="div"><i class="lcx far fa-briefcase-medical "></i><i class="lcx fab fa-briefcase-medical "></i><i class="lcx fas fa-briefcase-medical "></i></div>
<div class="div"><i class="lcx far fa-broadcast-tower "></i><i class="lcx fab fa-broadcast-tower "></i><i class="lcx fas fa-broadcast-tower "></i></div>
<div class="div"><i class="lcx far fa-broom "></i><i class="lcx fab fa-broom "></i><i class="lcx fas fa-broom "></i></div>
<div class="div"><i class="lcx far fa-brush "></i><i class="lcx fab fa-brush "></i><i class="lcx fas fa-brush "></i></div>
<div class="div"><i class="lcx far fa-btc "></i><i class="lcx fab fa-btc "></i><i class="lcx fas fa-btc "></i></div>
<div class="div"><i class="lcx far fa-buffer "></i><i class="lcx fab fa-buffer "></i><i class="lcx fas fa-buffer "></i></div>
<div class="div"><i class="lcx far fa-bug "></i><i class="lcx fab fa-bug "></i><i class="lcx fas fa-bug "></i></div>
<div class="div"><i class="lcx far fa-building "></i><i class="lcx fab fa-building "></i><i class="lcx fas fa-building "></i></div>
<div class="div"><i class="lcx far fa-bullhorn "></i><i class="lcx fab fa-bullhorn "></i><i class="lcx fas fa-bullhorn "></i></div>
<div class="div"><i class="lcx far fa-bullseye "></i><i class="lcx fab fa-bullseye "></i><i class="lcx fas fa-bullseye "></i></div>
<div class="div"><i class="lcx far fa-burn "></i><i class="lcx fab fa-burn "></i><i class="lcx fas fa-burn "></i></div>
<div class="div"><i class="lcx far fa-buromobelexperte "></i><i class="lcx fab fa-buromobelexperte "></i><i class="lcx fas fa-buromobelexperte "></i></div>
<div class="div"><i class="lcx far fa-bus "></i><i class="lcx fab fa-bus "></i><i class="lcx fas fa-bus "></i></div>
<div class="div"><i class="lcx far fa-bus-alt "></i><i class="lcx fab fa-bus-alt "></i><i class="lcx fas fa-bus-alt "></i></div>
<div class="div"><i class="lcx far fa-business-time "></i><i class="lcx fab fa-business-time "></i><i class="lcx fas fa-business-time "></i></div>
<div class="div"><i class="lcx far fa-buy-n-large "></i><i class="lcx fab fa-buy-n-large "></i><i class="lcx fas fa-buy-n-large "></i></div>
<div class="div"><i class="lcx far fa-buysellads "></i><i class="lcx fab fa-buysellads "></i><i class="lcx fas fa-buysellads "></i></div>
<div class="div"><i class="lcx far fa-calculator "></i><i class="lcx fab fa-calculator "></i><i class="lcx fas fa-calculator "></i></div>
<div class="div"><i class="lcx far fa-calendar "></i><i class="lcx fab fa-calendar "></i><i class="lcx fas fa-calendar "></i></div>
...
...
...



<div class="div3"></div>
<div class="div2"><span class="span2">======================= 结束 =======================</span></div>

<script>

var divs = document.querySelectorAll(".lcx");
var info = document.querySelector(".span4");
var search = document.querySelector("#search");

for (var i in divs) {
    var div = divs[i];
    div.onclick = (function(div) {
        return function () {
            var cls = div.getAttribute(class);
            info.innerHTML = cls.replace("lcx ", "");
        };
    })(div);
}

search.onchange = function() {
    var v = search.value;
    for (var i in divs) {
        var div = divs[i];
        try {
            div.parentNode.style.display = "";
        } catch(e) {
            console.log(div);
        }
    }
    if (v == "") {
        return;
    }
    for (var i in divs) {
        var div = divs[i];
        try {
            var cls = div.getAttribute(class);
            if (cls.indexOf(v) == -1) {
                div.parentNode.style.display = "none";
            }
        } catch(e) {
            console.log(div);
        }
        
    }
};

</script>

 

解决找图标的问题

标签:demo   theme   pos   icon   tst   angular   hone   turn   lan   

原文地址:https://www.cnblogs.com/LcxSummer/p/14764272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!