CSS/leaflet

I had a question about CSS:
I had a code like below. From browser, I can see a samll icon  and I hover on top the icon, I can see "SITE CALL".  It use ::before and ::after effect
<a class="leaflet-control-dropdown-wc fas fa-th-large site-call-icon" title="SITE CALL" style="pointer-events: auto; opacity: 1;"></a>

If I click the icon, it will open a dialog. Below is code:
$(document).on('mouseup', ".leaflet-control > a.leaflet-control-dropdown-wc", function (e) {
            
            openSites($(".leaflet-top.leaflet-left > .leaflet-control"));
      });

I have a couple questions here:
I don't see the icon in the code, but I do see glyphs under css/fonts folder, there are some woff/ttf/eot/svg files, but I can't open them.
I also see there is one fontawesome folder which also have some woff files there.
where does "leaflet-control-dropdown-wc" defined? so it can show the icon?  I can only find "leaflet-control-dropdown-wc" in this two places. There must be a way to connect to it, since I am going to add a new icon ("search" ) for it. I don't know where to define the class , like "leaflet-control-dropdown-wc" for the "search" icon.

By the way, what does > mean here? leaflet-control > a.leaflet-control-dropdown-wc  . Does it mean leaflet-control is the parent of leaflet-control-dropdown-wc?

Any inputs will appreciated