1

I have a page in my communication site in which, I want to add my contact information.

I want to insert icons for it, which should appear before the text.

Example:

I want to add phone number icon and then type my phone number.

Similar to this one:

Contact Info Icons

So how to insert icons with text in Modern Experience ?

Thank you !!

  • You cannot add icons directly in Text webpart. You may need to develop your own SPFx webpart. – Ganesh Sanap Oct 22 '19 at 7:14
  • There is any tutorial to follow up to develop this web part and achieve it ? @Ganesh Sanap – SmithBZ Oct 22 '19 at 7:20
  • Yes, there is. Check my answer given below. – Ganesh Sanap Oct 22 '19 at 7:23
1

You cannot add icons directly in Text webpart. You may need to develop your own SPFx webpart.

You can use Office UI Fabric icons in SPFx webpart as stated in below official documentation by Microsoft:

Usage of the Office UI Fabric icons in SPFx components.

You can find the official documentation of SPFx on how to setup environment and how to build your SPFx webpart below:

Overview of the SharePoint Framework.

  • So after developing this web part i can add icon inside a textbox instead of using the defaults ones (Bullets & Numbers...) ? @Ganesh Sanap – SmithBZ Oct 22 '19 at 8:14
  • SPFx web part is client side coding part. you can do so may things with this. You don't have to use Text webpart if you are creating your own webpart. You can also make it configurable by creating a SharePoint list with contacts and fetch those contacts in your webpart using custom code. – Ganesh Sanap Oct 22 '19 at 8:17
0

If you want to add custom icons in SPFX webparts then you can convert your image to base64 and set your image src with this base64 code. Like below

<img src='data:image/png;base64,iVB...' />

If the answer is helpful, please upvote and mark as accepted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.