Adding Clickable Logo to Simple List Title

Hello!

I am using a Simple List section to display our group members. In some of the Titles (ie group member names) I would like to add an inline ORCID iD logo (https://info.orcid.org/documentation/integration-guide/user-experience-display-guidelines/) next to their name, which is clickable and links to their ORCID iD webpage. Is this achievable using CSS and HTML code blocks or do I need header/footer injection? 

Website: https://point-trumpet-33bp.squarespace.com /The Group

Here is what I would like to achieve (except not the underline) next to some of their names.

Thank you!!

You can use this code to Website Tools > Custom CSS. Repeat similar for other items

/*Add an icon under List Item Titles*/
section[data-section-id="64e45341bb8e1b36f0a8ac78"] {
ul.user-items-list-simple li .list-item-content__title {
    display: flex;
    align-items: center;
    justify-content: center;
}
ul.user-items-list-simple li .list-item-content__title:after {
    content: "";
    background-position:center;   
    z-index:9999;
    background-size: contain;
    background-repeat: no-repeat; 
    display: inline-block;
    width: 30px;
    height: 30px;
}
ul.user-items-list-simple li:nth-child(1) .list-item-content__title:after {
    background-image: url(https://cdn.pixabay.com/photo/2016/10/31/00/53/shield-1784661__340.png);
}
ul.user-items-list-simple li:nth-child(2) .list-item-content__title:after {
    background-image: url(https://cdn.pixabay.com/photo/2016/11/30/18/14/light-bulb-1873540__340.png);
}
ul.user-items-list-simple li:nth-child(3) .list-item-content__title:after {
    background-image: url(https://cdn.pixabay.com/photo/2024/05/04/01/25/white-tailed-eagle-8738135_1280.jpg);
}}

Hey tuanphan,

Thanks for your response! That got the logos appearing to the right of the titles which is great. Is it possible to add a link to those logos to make them clickable?