how to add by css code news thicer has a icon like aljaseera inline desplay poth

Hi,
Do you want to add an icon to some elements using CSS? If so, please let me know which icon you want to use and where you want it added. Also, provide a link to the icon (it should be uploaded to your website’s media library), and I’ll help you with the CSS.

Can you please provide a screenshot to that section you like so I can better understand the icon you’ll like on aljazeera

Hi,
I see, if you want to use it on the trending now element from tagDiv Composer, you can use this custom css
.td_block_trending_now:before {
content: "";
position: absolute;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuODMzIDEwTC42NjcgOC44MzNsNi4xNjYtNi4yMDggMy4zMzQgMy4zMzNMMTQuNSAxLjY2N2gtMi4xNjdWMGg1djVoLTEuNjY2VjIuODMzbC01LjUgNS41TDYuODMzIDVsLTUgNXoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
background-position: 0;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 1px;
left: -4px;
}
The results will be – https://prnt.sc/vFakDGQG2bCR
Thank you!

Hi,
Ok, so now on desktop is set and is displayed correctly https://prnt.sc/5k-Gh59f5aB5 but you need it on mobile to be adjusted, for this css in the theme panel > custom code> advance css > phone css:
body .td-trending-now-wrapper {
flex-direction: row;
margin-left: 18px;
}

For tablet plase use this code:
.td_block_trending_now {
padding: 0 6px 0 20px;
}
Set the code under the theme panel > custom code > advance css > IPAD PORTRAIT – https://i.imgur.com/ejh2LNu.png

Hi,
I see what you mean. The original design is displayed because the page is not yet cached in the browser; once it’s cached, it should no longer be displayed. Also, what could be done is to load the css faster; for this, the css can be set in the head of the website. Also, this is the css adjusted, it will make the results for the news ticker to look like this https://prnt.sc/a3SGi5d8_TF5 :

@media (max-width: 767px) {
body .td-trending-now-display-area {
top: 2px;
}
body .td-trending-now-display-area .td_module_trending_now .entry-title {
line-height: 26px;
}
.td_block_trending_now {
padding: 0 6px 0 20px;
}
}
Set the css in the theme panel > analytics/js code in head section and make sure that you set it between css tags like this – https://prnt.sc/DHl1atBWUwVt

Hi,
The code appears on your site because you didn’t set it before the style tags as I mentioned and indicated in the provided image.

Hi,
The code provided is without the style tags, because setting them here in a reply will change the code structure, but it should be like this https://prnt.sc/DHl1atBWUwVt I set the code with tags here https://pastebin.com/KJK8r8td