How can I position and bold HTML elements?

Question

0.00/5 (No votes)

See more:

In my visual basic mvc application I have this code:

@<div Class="isa_success" id="bloc2">
<i Class="fa fa-check"></i>
@Html.Raw("Плаката се редактира от потребител " + Model.UserName + ".")
</div>
As a result I get green rectangle with an icon and text in it like this:
|(3spaces)icon(3spaces)text|
I want to move the icon to the left corner and to to make "Model.UserName" to be bold.
Can you help me?

What I have tried:

I tried changing margin and padding of the "i" element but without success.

Posted 17-Jan-19 22:54pm

Member 13992723

Updated 18-Jan-19 2:20am

v3

Add a Solution

Comments

Richard Deeming 18-Jan-19 9:51am

@Html.Raw("Плаката се редактира от потребител " + Model.UserName + ".")

That looks like a bad idea. The Model.UserName won't be properly HTML-encoded, which could open your site up to an XSS attack, albeit one that would only work on the user who initiated it.

Why not use:

Плаката се редактира от потребител @(Model.UserName).

MadMyche 18-Jan-19 11:21am

Is this utilizing Font-Awesome?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MadMyche · Answer 1 · 2019-01-18T02:20:00

It can only be assumed that the icon you speak of is within that Html.Raw line; and I am assuming that this is the code of the View page that you are using. You may want to update your question (using the "Improve Question" widget) to add in the actual HTML markup that is generated (use "View Source" in the browser to get it)

The problem you want to fix appears to be more markup related than programming. Looking at the code from the View I came up with this:
1. The <i></i> element has no content within it, so I eliminated it.
2. Try using the basics of CSS first; inject in some inline styles

You may need to experiment with this, but it should give you a start. Just change the CSS values within the style attribute on your <div>

HTML

@<div Class="isa_success" id="bloc2" style="text-align: left; font-weight:900;">
     @Html.Raw("Плаката се редактира от потребител " + Model.UserName + ".")
</div>