0

As you can see in the image there is an image input field , i want to change that in image icon, How can i change that in a image icon instead of browse.. button , enter image description here

Inside form.py I defined the fields classes :

class Meta:
        model = Blog
        fields = ('tag',"title","image_data","body",)

        widgets ={
            'image_data': forms.FileInput(attrs={'class':'control-flow blogimage'})
        }

custom.css

.blogimage{
    style:fa fa-image;
}

html

<h1>Create a new blog</h1>
<form enctype="multipart/form-data" method="POST">
    {% csrf_token %}
    {% bootstrap_form form %}
    
    <input type="submit" value='Publish' class="btn btn-primary btn-large">
</form>

generated html of imagefield :

<div class="form-group"><label class="control-label" for="id_image_data">Image data</label><input type="file" name="image_data" class="blogimage" accept="image/*" title="" required="" id="id_image_data"></div>

If more information or code is require than tell me in comments session I will update my question with that information.

Ahmed Yasin
  • 886
  • 1
  • 7
  • 31

0 Answers0